0

我有一个对话

<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/

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

我正在使用 jQuery 1.7+，live api 已被弃用或删除，API 建议使用 on()。

4

5 回答 5

3

你没有on正确使用。live用于将事件处理程序绑定到文档以侦听从特定选择器冒出的事件，但是通过on显式调用 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);
});
于 2013-04-08T02:08:07.813 回答
1

我找到了一个解决方案，不确定这是最好的解决方案，但似乎可行。

$("#suggestions").on("click","li", function() {
    alert(this.id);
});
于 2013-04-08T02:10:14.450 回答
1

下面的脚本仅将点击事件绑定到页面中当前存在的 DOM。

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

将点击事件绑定到页面中已创建和将要创建的所有 DOM。将事件绑定到document。

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

有关代码，请参见提琴手。

于 2013-04-08T02:27:20.133 回答
0

将选择器传递给on()它，它就像旧的一样工作live()：

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

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

于 2013-04-08T02:09:14.197 回答
0

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

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

但是像这样

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

也就是说，不是点，而是在它前面加上井号#。

于 2013-04-08T02:23:33.507 回答