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