在重新插入DOM时未触发附加到Jquery对象的事件。

Question

我创建一个jQuery对象：

var $el = $("<div>");

并附上几个事件：

$el.on(event, selector, callback);

然后添加将最终触发这些事件的内部html。然后我将$el添加到文档中：

$(document).html($el);

所有的事件都如预期的那样发生了。但当我改变文件的内容时：

$(document).html($another_el);

然后把它改回来

$(document).html($el);

同样的事件不会再被触发。我漏掉了什么明显的东西吗？

Answer 1

如果希望保留附加的JQuery数据(例如事件处理程序)，那么在通过html()分配新元素之前，应该显式地分离()元素。

来自jQuery文档：

• 关于.html()

当.html()用于设置元素的内容时，该元素中的任何内容都将被新内容完全替换。此外，在用新内容替换这些元素之前，jQuery会从子元素中删除其他结构，例如数据和事件处理程序。

• 关于.detach()

.detach()方法与.remove()相同，只是.detach()保存与已删除元素关联的所有jQuery数据。当删除的元素稍后重新插入DOM时，此方法非常有用。

Answer 2

http://api.jquery.com/html/#html-htmlString

当.html()用于设置元素的内容时，该元素中的任何内容都将被新内容完全替换。此外，在用新内容替换这些元素之前，jQuery会从子元素中删除其他结构，例如数据和事件处理程序。