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

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()并.on()再次注册,但我的问题是为什么以前声明.on(".remvove")没有捕获克隆元素的变化.

Answer 1

因为您需要传递一个布尔参数,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>