Clone a div and then clone again from the child

Question

I have the following simple code, where I double click a div (with class container) and it's simply clones itself inside another div (with id containment-wrapper):

html

<span class="container">div one</span>

<div id="containment-wrapper">
</div>

Jquery

$(".container").dblclick(function() {

        $(this).clone().appendTo('#containment-wrapper');
});

When I double click the original div, it clones itself and puts a div inside the containment-wrapper but when I double click a cloned div, it doesn't do anything even though it has class=container, why is this happening? I tried many different ways to clone it but nothing worked.

Answer 1

Because dblclick is not bounded to the new div. What you want to achieve can be easily done with live

$(".container").live('dblclick', function() {

        $(this).clone().appendTo('#containment-wrapper');
});

Answer 2

Since you're dynamically adding div tags they aren't automatically bound to the .dblclick function you've specified. Using a live event handler is one way to solve this.

Answer 3

It's because the event handler isn't cloned. Use delegate instead:

$(".container").delegate("","dblclick",function() {
  $(this).clone().appendTo('#containment-wrapper');
});