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

Question

I cannot trigger an event in element I, clone / paste in the DOM.

Check out the script 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 the cloned DIV A , nothing happens.

How can I trigger an event on a cloned element?

Answer 1

There are two solutions that I propose.

First, the best option in this case would be to add the argument true to clone() , for example, in this case it would be:

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

As the first argument, clone() represents:

"A boolean value indicates whether to copy event handlers and data along with elements. The default value is false." - jQuery API section for clone () .

This means that all related events will be stored on each cloned item.

jsFiddle here.

---

The second option, perhaps not the way for this example, is to use the on() event delegation function:

"Delegated events have the advantage that they can handle events from descendant elements that will be added to the document later." - jQuery API section for on () .

In this case:

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

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

jsFiddle here.