Javascript jQuery'；s克隆的元素在被删除并附加到容器两次后将丢失单击事件

检查这把小提琴：

基本上，如果我用.clone（true，true）克隆一个元素，在我用.html替换容器并再次追加，然后再次重复该过程之后，单击事件就消失了

---

jQuery有什么问题吗？还是我做错了什么？

当您在动态添加的内容中有事件监听器时，通常使用事件委派来简化事情。这意味着您将事件侦听器附加到未删除的父容器（在本例中是您的

#container

元素），并使用jQuery

.on（）

调用中的选择器指定您感兴趣的子元素

下面是一个示例，说明了适用于您的用例的技术，这里是一个片段：

$（“#容器”）。在（“单击”，“项目”，函数（）上）{
警报（“它工作”）
})
var html=“Hi”
$（“#容器”）.html（html）
函数add_remove（）{
$（“#容器”）.html（html）
}

删除并再次添加

检查以下代码（已对代码进行了细微更改，以使其正常工作）。您甚至不需要

clone（）

：

var项目=$（“Hi”）；
$（“#容器”）。在（'单击'，'项目'，函数（）上{
警惕（“它起作用”）；
});
$（“#容器”）。追加（项目）；
函数add_remove（）{
$（“#容器”）.html（“”）。追加（项目）；
警报（'已成功克隆和附加'）；
}

删除并再次添加

谢谢。这很有效。我正在为聊天系统中的每条消息做一个点击事件，这样做会更有效率。

item.click(function()
{
    alert("It works")
})

$("#container").append(item)

var stored = item.clone(true, true)

function add_remove()
{
    $("#container").html("")
    $("#container").append(stored)
}