javascript - 为什么我不能使用 $(this) jQuery 选择器

Question

我的问题是为什么我不能在 ajax 加载的内容中使用 $(this) jQuery 选择器这是我的代码:

$('.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();
            });

            var commentsReplyLink = $('.commentReplyLink');
            commentsReplyLink.click((e)=>{
                e.preventDefault();
                commentsReplyLink.each(()=>{
                    var $self = $(this);
                    var $addedBy = $self.attr('data-value');
                    var $commentID = $self.attr('data-id');


                    $('html,body').animate({
                        scrollTop: $(".post-comment-form").offset().top},
                        'slow');

                    $('#commentReplyDiv').css({
                        display: 'block',
                    });

                    console.log('added by: '+$addedBy+' comment id: '+$commentID);

                    $('#replyToCommentInput').val($addedBy);
                    $('#replyToCommentInput').attr('comment-id', $commentID);
                });
            });
        }).animate({opacity:'1'}, 3500, () => {});

我正在尝试从看起来像这样的超链接中获取 comment-id 属性:

<a class="commentReplyLink" data-id="14" data-value="Reply to #14" href=""><em>Reply</em></a>

但是当我点击那个超链接时，我会在 Console.log() 中得到这个 .. :

added by: undefined comment id: undefined

Answer 1

这是因为你为 .each() 回调使用了一个“箭头函数”，而箭头函数没有绑定(bind)一个 this 标识符，所以它使用最近的一个在外部范围内定义的。

改为使用函数参数。

commentsReplyLink.each((i, link)=>{
    var $self = $(link);

虽然看起来您可能只是想点击一下。如果是这样，则不需要循环。使用事件对象的 .currentTarget 属性。

$('.commentReplyLink').click((e)=>{
    e.preventDefault();
    var $self = $(e.currentTarget);
    var $addedBy = $self.attr('data-value');
    var $commentID = $self.attr('data-id');


    $('html,body').animate({
        scrollTop: $(".post-comment-form").offset().top},
        'slow');

    $('#commentReplyDiv').css({
        display: 'block',
    });

    console.log('added by: '+$addedBy+' comment id: '+$commentID);

    $('#replyToCommentInput').val($addedBy);
    $('#replyToCommentInput').attr('comment-id', $commentID);
});