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

时间:2013-04-08 02:03:49

标签: javascript jquery jquery-ui jquery-ui-dialog

我有一个带

的对话框
<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()。

5 个答案:

答案 0 :(得分:3)

您没有正确使用onlive用于将事件处理程序绑定到文档以侦听从特定选择器冒出的事件,但通过在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);
});

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

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

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

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

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

有关代码,请参阅fiddler

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

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

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

但是像这样

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

也就是说,而不是一个点,而是用英镑符号#。

作为前缀