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

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文档：

• on .html()：

  

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

• on .detach()：

  

.detach（）方法与.remove（）相同，除了.detach（）保留与删除的元素关联的所有jQuery数据。当删除的元素稍后要重新插入DOM时，此方法很有用。

Answer 2

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

  

当.html（）用于设置元素的内容时，任何内容   在那个元素完全被新内容所取代。   此外，jQuery删除了其他构造，如数据和事件   在用这些元素替换之前，来自子元素的处理程序   新内容。