javascript - jQuery 1.7+ on(click..) 不适用于动态添加的 <li>

Question

我有一个对话

<ul id="suggestions0">
    <li id="suggestion0-0" class="suggestion">BLO</li>
    <li id="suggestion0-1" class="suggestion">BLU</li>
    <li id="suggestion0-2" class="suggestion">BLL</li>
    <li id="suggestion0-3" class="suggestion">BOO</li>
    <li id="suggestion0-4" class="suggestion">CLA</li>
</ul>

我想动态替换内容。

我用这个更改为ul内容

        $("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li><li id='test0-2' class='suggestion'>BLO</li><li id='test0-3' class='suggestion'>BLO</li><li id='test0-4' class='suggestion'>BLO</li><li id='test0-5' class='suggestion'>BLO</li><li id='test0-6' class='suggestion'>BLO</li>");

我想要的是，当我点击其中一个单词时，我想做一些事情，假设有一个警报。

我尝试这样做

$(".suggestion").on("click", function() {
    alert(this.id);
});

但警报从未出现。

这是显示问题的示例 http://jsfiddle.net/survivant/cyFxp/1/

在示例中，如果单击“确定”，则不会更改内容，因此如果单击“LI”，它将起作用，但如果单击“NOTOK”，则不会收到事件。

我使用的是 jQuery 1.7+，实时 API 已弃用或删除，API 建议使用 on()。

Answer 1

您没有正确使用on。 live 用于将事件处理程序绑定(bind)到文档，以监听从特定选择器冒出的事件，但可以通过在 .suggestion 上显式调用 on 来实现>，您只会将听众附加到现有建议。因此，您需要使用 on 绑定(bind)一个始终存在的元素，并传递一个选择器来挑选动态创建的元素。

// With live like this:
$('.suggestion').live('click', ...

// Is equivalent to this:
$(document).on('click', '.suggestion', ...

// Not this:
$('.suggestion').on('click', ...

就您而言，您可以使用 ul，而不是基于 on document。

$("#suggestions0").on('click', '.suggestion', function(){
  alert(this.id);
});