javascript - jQuery 的克隆元素在被删除并附加到容器两次后丢失点击事件

Question

检查这个 fiddle :https://jsfiddle.net/L6poures/

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

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

var stored = item.clone(true, true)

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

基本上，如果我使用 .clone(true, true) 克隆一个元素，在我用 .html 替换容器并再次附加，并再次重复该过程后，点击事件就消失了。

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

Answer 1

当您在动态添加的内容中有事件监听器时，使用事件委托(delegate)通常会简化事情。这意味着您将事件监听器附加到未删除的父容器 - 在本例中是您的 #container 元素 - 并且您在 jQuery .on() 调用以指定您感兴趣的子元素。

这是一个 updated fiddle这说明了您的用例的技术，这里是一个片段:

$("#container").on( "click", "#item", function() {
	alert("It works")
})

var html = "<div id='item'>Hi</div>"

$("#container").html(html)

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='container'></div>

<br>

<button onclick="add_remove()">
  Remove And Add Again
</button>

请注意，代码现在甚至不使用 .clone()；它只是每次插入 HTML 代码，根本不用担心事件监听器。您可以像在原始代码中一样使用.clone()，但事件委托(delegate)使您可以灵活地以任何一种方式进行操作。在任何情况下，您都不需要 .clone(true,true) 参数，因为您不关心在插入的代码中保留事件监听器。