Why I cant use $(this) the jQuery selector

Question

My question is why I cant use $(this) the jQuery selector in ajax loaded content here is my code:

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

im trying to get the comment-id attribute from the hyperlink that looks like that:

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

but when is clicked on that hyperlink im getting this in the Console.log() .. :

added by: undefined comment id: undefined

You're using arrow functions which don't create a new context. — zzzzBov, Apr 08 '18 at 15:42
`console.log(this);` and **don't use arrow functions** if you don't want `this` bound. Just use plain functions instead and your code should work just fine, but as it stands you're doing it wrong. — Niet the Dark Absol, Apr 08 '18 at 15:43
Possible duplicate of [Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)](https://stackoverflow.com/questions/27670401/using-jquery-this-with-es6-arrow-functions-lexical-this-binding) — Eddie, Apr 08 '18 at 15:55
Why are you even using arrow functions if you don't even know how they work? — connexo, Apr 08 '18 at 16:03

score 0 · Answer 1 · 2018-04-08T15:49:49.180

It's because you used an "arrow function" for the .each() callback, and arrow functions don't bind a this identifier, so it's using the nearest one defined in an outer scope.

Instead use the function parameter.

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

Though it seems like maybe you just wanted the one clicked. If so, you don't need a loop. Use the .currentTarget property of the event object.

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

score 0 · Accepted Answer · answered Apr 08 '18 at 15:54

0

It was from the function that im using. I have to use plain function and it works fine, thanks for the help guys.

The $(this) not working in that function ()=>{}

answered Apr 08 '18 at 15:54

Bigisoft

31
7

Why I cant use $(this) the jQuery selector

2 Answers2