jQuery incorrect reference of 'this'

Question

This is my code:

$(document).ready(() => {
    $.getJSON("./data/journeys.json", (data) => {
        $.each(data, (i, journey) => {
            $("#journeyListings > tbody").append("<tr class='journeyOrder_" + journey.order + "'>" +
                                                     "<td>" + journey.originStation + "</td>" +
                                                     "<td>" + journey.destinationStation + "</td>" +
                                                     "<td>" + journey.startTime + "</td>" +
                                                     "<td>" + journey.arrivalTime + "</td>" +
                                                 "</tr>")
        });

        $("tr").on("click", () => {
            alert($(this).attr("class"));
        });
    });
});

On the 'click' method, I am trying to reference the row that has just been clicked (tr). When I refer to $(this), it seems that I am referring to the ajax getJson method as I am getting undefined in my alert. How can I reference the element instead?

BotNet · Accepted Answer · 2017-07-12T21:23:18.433

3

Instead of using the ES6 arrow function, which changes the scoping of this, go back to the long function form:

$('tr').click(function(){
  alert($(this).attr('class'));
});

Of course, if you want to stick with ES6, you should avoid this and use the event's currentTarget property:

$('tr').on('click', (e)=>{
   alert( $(e.currentTarget).attr('class') );
})

edited Jul 12 '17 at 21:23

answered Jul 12 '17 at 21:21

BotNet

2,759
2
16
17

This has worked, thank you! Will accept when I can – wmash Jul 12 '17 at 21:22
just want to add the currentTarget, you was to quick hehe :) – Extranion Jul 12 '17 at 21:27

jQuery incorrect reference of 'this'

1 Answers1