Question

似乎.on()无法绑定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

为什么这不起作用？

更新请注意，我知道.clone()有两个参数，但我不想让克隆元素继续注册旧事件，但是新事件，我可以使用.off()和{ {1}}再次注册，但我的问题是为什么先前声明的.on()没有捕获克隆元素中的更改。

Answer 1

因为您需要将布尔参数传递给clone，以便所有数据和事件处理程序都将附加到克隆元素。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强>被修改

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃34;我的问题是为什么先前声明的.on（＆＃34; .remove和＃34;）没有捕获克隆元素中的更改。＆＃34;

因为事件监听器附加到具有类名.remove的所有元素，这些元素在那个时间点存在于DOM中。

但是使用clone你创建了一个新元素。它刚刚创建。一个新节点。你早期的听众如何处理这个问题。

解决方案：
1.）使用事件委托并将监听器附加到静态祖先节点
2.）在调用clone函数时传递布尔标志，以便复制你的监听器 3.）在该节点上再次注册事件监听器。

Answer 3

取消绑定并绑定该函数。

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（）不适用于克隆元素

3 个答案: