jQuery .append(), prepend(), after() … duplicate elements and contents?

Question

In my code this command is run only once:

jQuery("#commentrating").append('A');

but inside the div #commentrating there appears two "A" elements! What may be causing this bug?

P.S. .after() is buggy as well :S

Answer 1

Maybe it's caused by event-bubbling.(just a guess as long as no further info is available)

Assuming this:

<script  type="text/javascript">
jQuery(
  function($)
  {
    $('div')
      .click(function(e)
             {
              $('span',this).append('A');
             }
            );
  }
);
</script>
<div><div><b>click here:</b><span></span></div></div>

if you click on the text, the click will trigger on the inner div and bubble up to the outer div, the function will be executed 2 times.

To avoid this use stopPropagation()

<script  type="text/javascript">
jQuery(
  function($)
  {
    $('div')
      .click(function(e)
             {
              e.stopPropagation();
              $('span',this).append('A');
             }
            );
  }
);
</script>
<div><div><b>click here:</b><span></span></div></div>

Answer 2

Two possible causes:

(when using append, appendTo, prepend, prependTo ...):

---

1) If you attach 2 source elements to 1 destination element, if you use:

$("destination").append("source");

jQuery somewhere in your html finds 2 source_div elements and appends both of them.

2) If you attach 1 source element to 2 destination, like:

$("destination").append("source");

probably in your html you have 2 destination elements:

<div>
    <div class="destination"></div>
    ......
    <div class="destination"></div>
</div>