为何无法在AJAX加载的内容中使用jQuery的$(this)选择器？

嘿，这个问题我太熟了！咱们一步步拆解你的问题，看看问题出在哪，怎么解决：

核心问题有两个 #

1. 动态元素的事件绑定时机不对 #

你现在是直接给$('.commentReplyLink')绑定click事件，但这些元素是通过AJAX的load()方法动态加载进来的——在你执行绑定代码的时候，这些元素还没被插入到DOM里呢！所以绑定的事件根本没挂到目标元素上，自然触发不了，更别说用$(this)了。

2. 箭头函数改变了this的指向 #

你写的commentsReplyLink.click((e)=>{...})用了箭头函数，箭头函数的this不会指向触发事件的DOM元素，而是继承自它外层的作用域（这里就是load()的回调函数作用域）。所以哪怕事件能触发，$(this)也不是你想要的那个点击的回复链接。

正确的解决方法 #

咱们针对这两个问题来改代码：

第一步：用事件委托绑定动态元素 #

把事件绑定到已经存在的父元素上（比如你的.commentsDiv，或者更上层的document），利用事件冒泡的特性来捕获动态元素的事件。这样不管元素什么时候加载进来，事件都能被触发。

第二步：改用普通函数保留this指向 #

把箭头函数换成普通的function(e){...}，这样事件触发时，this就会指向当前点击的那个.commentReplyLink元素，$(this)就能正常工作了。

修改后的代码示例 #

$('.commentsDiv').css({'opacity': '0'});
var loadTheComments = $('.commentsDiv').load($homeUrl+'trailer-comments/'+$trailerID,function(){
    $('.targetDiv').hide();
    $('.showSingle').click(function(e){
        e.preventDefault();
        $('#div'+$(this).attr('target')).slideToggle();
    });
    
    // 这里改成事件委托+普通函数
    $('.commentsDiv').on('click', '.commentReplyLink', function(e){
        e.preventDefault();
        // 现在$(this)就是你点击的那个回复链接了！
        console.log($(this));
        // 你的其他逻辑...比如遍历或者操作当前元素
        $('.commentReplyLink').each(function(){
            // 这里如果需要的话，$(this)也能正常指向每个.commentReplyLink元素
        });
    });
});

额外说明 #

• 事件委托的父元素尽量选离目标元素近的静态元素（比如这里的.commentsDiv），比绑定到document性能更好。
• 如果你一定要用箭头函数，那可以通过e.currentTarget来获取触发事件的元素，代替this——也就是$(e.currentTarget)，效果和$(this)一样，但一般还是推荐用普通函数更直观。

内容的提问来源于stack exchange，提问作者Bigisoft