jquery .on() doesn't work for cloned element

Question

It seems .on() failed to bind newly created element from clone()

<div class="container">
<div class="add">add</div>
</div>


$(".remove").on("click",function() {
    $(this).remove();
});

$(".add").on("click", function() {
 $(this).clone().toggleClass("add remove").text("remove").appendTo($(".container"));
});

jsfiddle

Why this doesn't work?

Update: please note that, I know .clone() takes two parameters, but I don't want to let the cloned element continue registered to the old events, but a new one, I could use .off() and .on() to register again, but my question is why the previously declared .on(".remvove") didn't capture the change in the cloned element.

You know what **[This fiddle](https://jsfiddle.net/cokdchbq/1/)** you provided had syntax error in your `$(this).clone().appendTo($("body"));`. `"` was missing after body!! So here is the **[Updated Fiddle](https://jsfiddle.net/cokdchbq/3/)** which works.. :) — Guruprasad J Rao, Apr 21 '15 at 06:12

Vigneswaran Marimuthu · Accepted Answer · 2015-04-21T06:09:46.983

11

Because you need to pass a boolean parameter to clone so that all data and event handlers will be attached to cloned element.

https://api.jquery.com/clone/

$(".remove").on("click",function() {
    $(this).remove();
});

$(".add").on("click", function() {
 $(this).clone(true).toggleClass("add remove").text("remove").appendTo($(".container"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="add">add</div>
</div>

Edited

$(".container").on("click", '.remove', function() {
    $(this).remove();
});

$(".add").on("click", function() {
 $(this).clone().toggleClass("add remove").text("remove").appendTo($(".container"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="add">add</div>
</div>

edited Apr 21 '15 at 06:09

answered Apr 21 '15 at 06:01

Vigneswaran Marimuthu

2,452
13
16

3

I don't think so, I want to bind a new event to the cloned element, why so many knee-jerk upvotes? – Sawyer Apr 21 '15 at 06:03
@Sawyer, If you attach a listener and if you add element that matches the selector which is used to attach event, it won't work because when the listener is attached, there was no element present – Vigneswaran Marimuthu Apr 21 '15 at 06:06
@Sawyer You can use delegates instead – Vigneswaran Marimuthu Apr 21 '15 at 06:06

score 1 · Answer 2 · answered Apr 21 '15 at 06:20

"my question is why the previously declared .on(".remvove") didn't capture the change in the cloned element."

Because the event listener was attached to all the elements with class names .remove which existed in the DOM at that point in time.

But with clone you created a new Element. It has just been created. A fresh node. How can your earlier listener work on this.

Solutions:
1.) Either use event delegation and attach your listener to a static ancestor node
2.) Pass the boolean flag while calling the clone function so that your listeners also get copied.
3.) Register the Event Listener Again on that node.

score 0 · Answer 3 · answered Apr 21 '15 at 06:25

Unbind and bind the function.

bindEvent();
function bindEvent(){
    $(".remove").unbind("click");
    $(".remove").bind("click",function() {
        $(this).remove();
        bindEvent();
    });
    $(".add").unbind("click");
    $(".add").bind("click", function() {
     $(this).clone().toggleClass("add remove").text("remove").appendTo($("body"));
        bindEvent();
    });
}

jsfiddle

jquery .on() doesn't work for cloned element

3 Answers3

Linked