javascript - jquery .on() 不适用于克隆元素

Question

似乎 .on() 未能绑定(bind)来自 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() 和.on() 重新注册，但是我的问题是为什么之前声明的.on(".remvove") 没有捕获克隆元素的变化。

Answer 1

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

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>

已编辑

$(".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>