How to trigger event on cloned/inserted element in DOM?

Question

I am not able to trigger event on element I clone/insert to the DOM.

Check the fiddle here.

HTML:

<div class="A">[THIS IS DIV A]</div>
<div class="B">CLICK TO CLONE DIV A</div>

jQuery:

$('.A').on("click",null,function() {    
    alert('DIV A CLICK');           
});

$('.B').on("click",null,function() {        
    $('.A').clone().insertAfter('.A');          
});

If I click on a cloned DIV A, nothing happens.

How can I trigger event on cloned element?

Answer 1

There are two solutions I propose.

Firstly, and the better option in this case, would be to add the true argument to clone(), for example in this case it would be:

$('.A').clone(true).insertAfter('.A');

As first argument of clone() represents:

"A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false." - jQuery API section for clone().

This means all bound events will be kept on each cloned element.

jsFiddle here.

---

The second option, probably not the way to go for this example, would be to use on()'s event delegation feature:

"Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time." - jQuery API section for on().

In this case:

$(document).on("click", ".A", function() { ...

Now, every new element with the class .A will be have this click event attached to it, even cloned elements.

jsFiddle here.