gpt4 book ai didi

jquery - 为什么第二次调用 .html() 会阻止 click() 函数工作?

转载 作者:行者123 更新时间:2023-12-01 04:06:25 25 4
gpt4 key购买 nike

我问了一个有点相关的问题here 。我有以下简单的 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>

在上面的代码中,如果我取消注释再次调用 .html() 的行,单击事件将停止触发,但我认为 $div jQuery 对象会只需再次替换 body 内容,而不会丢失其点击事件。

这该如何解释?

最佳答案

正如 related question 中所述,无论您将什么传递给 html,这些行都会运行:

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

现在,重要的是要知道.empty clear the data of the element 。这意味着 .data() 中存储的所有内容和每个事件都将被删除以防止内存泄漏。

因此,第一次执行 $("body").html($div); 时,p 不在正文内,因为您 .detach'ed它就在之前。 .empty 不会影响 p 并且它会保留其事件。但如果连续执行两次,则在第一个 .html.empty 生效后,该元素将重新附加到正文。它删除了它的事件。

解决方案是使用事件委托(delegate),这很简单,并且不需要 .detach 任何东西:

$('body').on("click", "p", function() {
//Your code
});

关于jquery - 为什么第二次调用 .html() 会阻止 click() 函数工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27403710/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com