jQuery 无法识别动态添加的 HTML

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

我有一个 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？

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

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

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