javascript - jQuery 无法识别动态添加的 HTML

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

要在所有 future 动态添加的列表项上维护此功能，您应该使用 $.on() 的事件委托(delegate):

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

阅读更多关于 $.on() 的信息，在线阅读 http://api.jquery.com/on/ .