jquery将侦听器添加到附加内容答案

【问题标题】：jquery add listener to appended contentjquery将侦听器添加到附加内容
【发布时间】：2013-01-27 19:13:59
【问题描述】：

我有一些这样的 jQuery 代码：

$("#add").click(function(event){
    $("#list").append('<a class="remove" href="#">x</a>');

    return false;
});

$('.remove').live('click', function(){
    alert("123");
});

如果有人点击 class=remove，我希望它提醒 123。但这不会发生。我认为这是一个简单的想法，但我一定遗漏了一些东西。

有什么想法吗？

谢谢。

【问题讨论】：

你需要delegate。

标签： javascript jquery jquery-append

【解决方案1】：

Live 已弃用，继续使用

$(document).on('click','.remove',function(){
alert("123");
});

【讨论】：

然后单击文档以绑定到加载时存在的内容
我看到它确实以您使用它的方式进行事件委托。有趣的。谢谢你。
是的，如果存在选择器，它就是委托事件处理程序。在这里阅读更多：api.jquery.com/on
这绝对是我认为最好的答案。

【解决方案2】：

另一种无需委托的方式添加元素和绑定事件：

$("#add").click(function(event){
    $("<a />", {
        "class": "remove",
        href: "#",
        text: "x"
    }).on("click", function() {
        alert("123");
        return false;
    }).appendTo("#list");

    return false;
});

避免使用live 方法，因为它已被弃用并最终在 jQuery 的最新版本中被删除。

【讨论】：

【解决方案3】：

尝试委托函数..因为您将其附加到list...您可以使用#list，它的性能比document 更好

 $('#list').on('click','.remove', function(){
     alert("123");
});

您可以通过链接阅读更多关于on()事件的信息

【讨论】：