Question

如何让jQuery事件监听器监听通过ajax调用加载的元素？

我通过ajax将注释加载到我的文档中。每个评论都有一个ajax删除按钮。对于最初加载文档的注释，我的功能正常。

但是任何新创建的评论或通过ajax检索到的评论，事件列表都没有提取。

<a class="comment-delete" href="/comments/delete/124">delete</a>

$(".comment-delete").click(function(e) {
    e.preventDefault();

    var $link = $(this),
        url = $link.attr('href');

        $.ajax(url, {
            dataType: 'json',
            beforeSend: function() {
            },
            error: function() {
            },
            success: function(data) {
                if (data.success) {
                    $($link).parent().parent().hide();
                }
            }
        });
});

Answer 1

更新答案

今天，执行此操作的适当方法是使用 on 方法和其他选择器。例如，如果我们想听取图像上的任何点击，我们可以这样做：

$("img").on("click", function () {
    alert( "You clicked on " + this.src );
});

这对于运行此代码后添加到DOM的任何图像元素都不起作用。相反，我们需要使用事件委托，这意味着我们在冒泡阶段进一步处理DOM事件：

$(document).on("click", "img", function () {
    alert( "You clicked on " + this.src );
});

在这种情况下，我们处理document级别的事件，但前提是它所进行的元素与我们的第二个"img"选择器匹配。因此，现在将处理任何图像，无论是最初在页面上还是在以后动态加载，都将被处理。

原始答案（2011年撰写）

$.live()和$.delegate()是您应该关注的两种方法。第一个将侦听文档以查找与您的选择器匹配的任何新元素，第二个将为它应该在哪里监听提供更精细的范围。

$(".comment-delete").live("click", function(){
  // handle delete logic
});

或者，更具体：

$(".comments").delegate(".comment-delete", "click", function(){
  // handle delete logic
});

Answer 2

您正在寻找live http://api.jquery.com/live/

如何让事件监听器识别新的文档元素？

2 个答案:

更新答案

原始答案（2011年撰写）