jQuery html() 方法在交换后将事件解除绑定(bind)到内部 html 中的元素？

Question

我遇到了一个有趣的问题。在我的网站上，当鼠标悬停在某个链接上时，我会动态地交换内容。这是通过类似于以下内容来完成的:

$('#box').html($('#newcontent').html());

现在在这个#newcontent里面部分，有一个 <button> - 我为其分配了这样的点击事件的元素:(在 $(document).ready() 函数内)

$("button#buttonName").click(function(){
  $("div#containerName").toggleClass("hidden");
  }

hidden是一个 display:none 魔法的 css 类。容器#containerName在包含按钮的元素和包含正在使用 html() 更改的结构的元素的外部 .

此时的结构模型

<div id="somethingthatwhenhoveredoverwillswapthecontent">Hover over me!</div>

<div id="box">Change me!</div>

<div id="newcontent" class="hidden">I am renewed!
  <button id="buttonName">Show the weird box at the bottom</button>
</div>

<div id="containerName" class="hidden">
  I am content that is only shown when the button is clicked
</div>

那么发生了什么:页面已加载，内容交换脚本工作正常，但按钮不会触发它的点击事件，出于测试原因，它甚至没有给出 alert('whatever');。 .看起来一旦 html() 交换了 <div id="newcontent"> 中的内容到 <div id="box"> , 事件未绑定(bind)(我怀疑)。

这只是我没有掌握一个概念还是整个方法都做错了？

Answer 1

在幕后，jQuery 正在创建一个新的 DOM 元素，而不是制作原始元素的“副本”。因此，它没有原始事件处理程序。您可以在调用 html() 时手动重新分配处理程序，也可以使用 delegate() 添加事件，如下所示:

$("#box").delegate("#buttonName", 'click', function(){
    $("#containerName").toggleClass("hidden");
});