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?

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?

• javascript
• jquery

• 1 Possible dup: stackoverflow./questions/9549643/… – David Tansey Commented May 8, 2013 at 23:58
• 1 That's officialy a dup. Ill delete it. I flagged it. – Peter Lur Commented May 9, 2013 at 0:04

1 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.