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

如何让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();
                }
            }
        });
});

解决方法

更新的答案

今天,执行此操作的适当方法是使用带有附加选择器的on方法.例如,如果我们想听取图像上的任何点击,我们可以这样做：

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

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

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

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

原始答案(2011年撰写)

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

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

或者,更具体：

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

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

解决方法

猜你在找的jQuery相关文章