动态添加的HTML不被jQuery识别

Question

在这里阅读其他一些内容：这个类似的问题，但我不确定如何将其应用于我的困境。

我有一个jquery函数替换列表中的一些HTML .. 例如，在函数运行之前：

<ul id="mylist">
<li id="item1">blah blah blah</li>
<li id="item2">blah blah blah</li>
<li id="item3">blah blah blah</li>
</ul>

然后我有另一个在点击LI时运行，例如：

$("#mylist li").click(function () {
alert($(this).attr("id"));
});

正常工作，直到我动态修改警告为空白的#mylist html。

如何替换#mylist html并仍能选择其中的li？

Answer 1

要在以后所有动态添加的列表项上维护此功能，您应该将事件委派与$.on()一起使用：

$("#mylist").on("click", "li", function(){
  alert( this.id );
});

在http://api.jquery.com/on/在线了解$.on()的更多信息。

Answer 2

当您替换#mylist的内容时，您还会删除之前附加到其子li元素的所有事件句柄。

尝试使用jQuery的live function而不是普通的click函数：

$("#mylist li").live("click", function() {
    alert($(this).attr("id"));
});

请注意，live事件与传统事件的工作方式略有不同，特别是在冒泡和事件取消方面。如果这是一个问题，请确保在操作#mylist后重新附加点击事件。

您也可以考虑使用event delegation。这是一个简单的例子：

$("#mylist").click(function(e) {
    alert($(e.target).closest("li").attr("id"));
});