Challenge Waypoint: Clone an Element Using jQuery has an issue.
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

Issue

I believe I've found bug in the phone simulation in Waypoint: Clone an Element Using jQuery:

I entered the code to clone target5 and append it to left-well, and now I see three target5 buttons in the phone simulator. FCC says my code is correct and advances me to the next challenge. The following challenges also show three target5 buttons:

• Waypoint: Target the Parent of an Element Using jQuery
• Waypoint: Target the Children of an Element Using jQuery

@qualitymanifest confirms this issue on his Linux box.

My code:

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

I can confirm this behavior in both Chrome and Firefox. For me it only happens on page load, but not if I remove the line and then add it back in. It looks like the script is being run twice on page load.

Funny thing: when I command+a selected all my code to copy it, the extra button disappeared as well.

I couldn't begin to imagine why that is. Maybe unfocus?

Even i got this bug. but if i start editing the code it disappears, it again appears while page loading. I just moved to another task.

+1 The same as stated by you guys...either in Firefox (Developer Edition) and Chrome...last update in both. Bahhh very wierd...

Both common.updatePreview$ and common.getJsOutput are called within common.executeChallenge$. They both evaluate JavaScript and that leads to scripts being run twice on resets, test runs, and page load.

@ltegman you may want to check out @augmt's last comment.

+1

Same issue... Is something in the library causing this behaviour?

I think it's a bug with generating an iframe while a page is loading. Just generate an iframe after a page is fully loaded?

+1
I agree that the script is being run twice.

+1

The script running twice.

When we run alert("test"); we can see the alert message twice.

PS: I'm using Mozilla Firefox for Ubuntu version 43.0

+1

So, script runs twice. I think the second time it runs is the proper one. Because the first time it runs roots back to a GoogleAnalyticsObject related script element at the least that is what I see from my developer console which I don't understand why:

FYI. Just posting my observation. Not making any conclusion here!

So it's clear that at some point the jQuery is being run twice,

What's interesting is that if you change the code to look like this:

<script>
  $(document).bind("ready",function(e) {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

the issue is resolved.

+1

+1

+1

Chrome v48.0.2564.109 m

+1

+1

+1

+1

I'd also add in a screenshot, but that's been done enough times before.

+1

+1

+1

I have this problem too.
This was my first bug report on GitHub. thank you.

Same here

Yeah, i confirm the bug too..

More comments confirming this bug are not necessary. We know this is a problem. All that's left if for someone to take ownership of fixing it.