Jquery 为什么对.html（）的第二次调用会停止click（）函数的工作？_Jquery_Dom

Jquery 为什么对.html（）的第二次调用会停止click（）函数的工作？

jquery dom

Jquery 为什么对.html（）的第二次调用会停止click（）函数的工作？,jquery,dom,Jquery,Dom,我问了一个有点相关的问题。我有以下简单的HTML和jQuery代码 <html> <body style="font-size:25px"> <div><p> CLICK TO TEST </p></div> <script src="/js/jquery-1.11.1.min.js"></script> <script> $(function() { $("p").clic

我问了一个有点相关的问题。我有以下简单的HTML和jQuery代码

<html>
<body style="font-size:25px">

<div><p> CLICK TO TEST </p></div>

<script src="/js/jquery-1.11.1.min.js"></script>

<script>
$(function() {
    $("p").click(function() { console.log("P1 CLICKED!"); });

    var $div = $("div").detach();

    $("body").html($div);
    //$("body").html($div); // If I uncomment this the click event stops firing!!
});
</script>

</body>
</html>


点击测试
$（函数（）{
$（“p”）.click（function（）{console.log（“P1 CLICKED！”）；}）；
var$div=$（“div”）.detach（）；
$（“body”）.html（$div）；
//$（“body”）.html（$div）；//如果我取消对此的注释，单击事件将停止触发！！
});

在上面的代码中，如果我再次取消对调用

.html（）

的行的注释，click事件将停止触发，但我认为

$div

jQuery对象将简单地再次替换

body

内容，而不会丢失其click事件

如何解释这一点？

您可以将事件侦听器更改为

$(document).on("click", "p", function() {
  // whatever
});

我将在每个

元素上触发，无论它们是否在页面加载完成后添加。

如中所述，无论传递给

html

，这些行都将运行：

if ( elem ) {
    this.empty().append( value );
}

现在，知道这一点很重要。这意味着存储在

.data（）

中的所有内容和每个事件都会被删除，以防止内存泄漏

因此，第一次执行

$（“body”）.html（$div）

，因为您刚才拆下了

，所以p
不在主体内。.empty
不会影响p
并保留其事件。但如果连续执行两次，则在第一个.html
和.empty
生效后，元素将重新附着到主体。它抹去了它的事件
解决方案是使用事件委派，这很简单，不必。分离任何内容：
$('body').on("click", "p", function() {
  //Your code
});

但是变量仍然是一样的，如果我没有弄错的话？是的，变量是一样的，但是从它的数据中清除了。@Amit@Karl说得清楚，你是说在我调用html（$div）
或append（$div）
之后，重新附加的$div
仍然是与我最初分离的$div
相同的对象，也就是说，没有克隆？在这种情况下，它突然变得有意义了！如果不进行事件委派（在本例中这是一个极好的答案），在分离时是否可以克隆$div
，以便我可以随意多次重新连接它？@Floris是的，克隆div可以防止事件被删除，但因为您使用的是.html
。在添加它之前，它总是。清空。您应该执行$（'body'）.empty（）.append（$div.clone（true），$div.clone（true），…）
@卡尔·安德烈·加农：好的，终于完全按照我的意愿工作了。谢谢你的帮助和耐心。：）