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用于将事件处理程序绑定到文档以侦听从特定选择器冒出的事件，但通过在on上显式调用.suggestion，您只会将侦听器附加到现有建议。因此，您需要使用on绑定一个始终存在的元素，并传递一个选择器来选择动态创建的元素。

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

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

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

在您的情况下，您可以使用on。

，而不是将document关闭ul。

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

Answer 2

我找到了一个解决方案，不确定它是最好的解决方案，但似乎有效。

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

Answer 3

下面的脚本只将click事件绑定到页面中当前存在的DOM。

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

将click事件绑定到将在页面中创建并将在其中创建的所有DOM。将事件绑定到document。

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

有关代码，请参阅fiddler。

Answer 4

将选择器传递给on()，它的作用类似于旧的live()：

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

请参阅更新的小提琴：http://jsfiddle.net/cyFxp/2/

Answer 5

建议不是一个类，而是一个id 它不应该是

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

但是像这样

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

也就是说，而不是一个点，而是用英镑符号＃。

作为前缀

jQuery 1.7+ on（click ..）无效<li>动态添加</li>

5 个答案: