jQuery html() 方法在交换后取消绑定(bind)事件到内部 html 内的元素？

Question

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

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

现在在这个#newcontent部分，有一个<button> -我向其分配了如下单击事件的元素:(在 $(document).ready() -函数内)

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

hidden是一个 css-Class 执行 display:none 魔法。容器#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");
});