【问题标题】:Appended items not reacting to event handler附加项对事件处理程序没有反应
【发布时间】:2014-06-30 23:28:31
【问题描述】:

我正在使用 jquery 随时随地将一些列表项添加到列表中。每个列表项都有两个类。一个控制 CSS 属性,另一个控制列表项上的 click。列表项看起来像这样:

技嘉大战

这里 'il' 控制 CSS,l3 控制点击功能。

我的问题是,当我在旅途中添加列表项时,为所有列表项定义的常规单击功能不适用于新列表项。有什么建议吗?

【问题讨论】:

标签: javascript jquery html css


【解决方案1】:

而不是使用:

$('.l3').click(function(){});

使用(如果可以,请比document 更具体:

$(document).on('click', '.l3', function(){});

后者将创建一个委托事件处理程序,该处理程序将为将来创建的任何元素以及已经存在的元素处理事件。

【讨论】:

    【解决方案2】:

    选择器$(".l3") 将事件处理程序添加到与其匹配的 DOM 中的现有元素中。如果您要添加新项目,您可以在文档上指定事件处理程序,如 Justin's answer 中所述,或者,如果您需要更细粒度的控制,您可以动态地将事件处理程序添加到新项目:

    $("<li>", { class: "l3" }).appendTo(someList).click(function () { ... });
    

    【讨论】:

    • 我用这个 $('.orderedList').append('
    • ' + $('.nam').val() + '
    • ').click(function() { alert("描述:\n "+$('.desc').val().trim()+"\n\n位置:\n"+$ ('.loc').val().trim()); });它不起作用!
  • 您将点击处理程序分配给列表 ($('.orderedList')),而不是基础列表项。此外,您正在添加 jQuery 解析和附加的原始 HTML。您可能想使用appendTo 技术:$("&lt;li&gt;", { class: "il l"+i }).text($('.nam').val()).appendTo($('.orderedList')).click(function () { ... })
  • 猜你喜欢
    相关资源
    最近更新 更多
    热门标签