How to Access $(this) inside jquery load callback function?

Question

We have code that loads html to div with class content. We have div element with link class which has data-href and some other data-* properties. The code looks like:

$(document).on('click', '.link', linkClick);
linkClick: function (event) {
            event.stopPropagation();
            $('.content').load($(this).data('href'), function (response, status) {
                if (status == 'error') {
                    $('.content').html("Something went wrong. Please try again later");
                }
            });
        }

I want to access $(this) inside this callback of load function to get values of all other data-* properties of link clicked, how can i do that?

score 2 · Accepted Answer · answered May 15 '17 at 12:32

Create a scoped reference to it before the load call:

function (event) {
    event.stopPropagation();

    var $that = $(this); // <- Like this

    $('.content').load($(this).data('href'), function (response, status) {

        // You can use $that here

        if (status == 'error') {
            $('.content').html("Something went wrong. Please try again later");
        }
    });
}

score 0 · Answer 2 · answered May 15 '17 at 12:29

$(document).on('click', '.link', linkClick);
var href = $(this).data('href');
linkClick: function (event) {
    event.stopPropagation();
    $('.content').load(href, function (response, status) {
        if (status == 'error') {
            $('.content').html("Something went wrong. Please try again later");
        }
    });
}

score 0 · Answer 3 · answered May 15 '17 at 12:30

You can use event.target to access clicked element. Most common way is to store it under that or self variable.

$(document).on('click', '.link', linkClick);
linkClick = function (event) {
    event.stopPropagation();
    var that = event.target;
    $('.content').load($(that).data('href'), function (response, status) {
        if (status == 'error') {
            $('.content').html("Something went wrong. Please try again later");
        }
    });
}

How to Access $(this) inside jquery load callback function?

3 Answers3