Question

I’d like to store some arbitrary data on an element for use in an ajax callback like so:

$(this).data('my_data', 'hey there');
$(this).click(function(e) {
    e.preventDefault();
    // $(this).data('my_data') == 'hey there'  :-)
    $.post($(this).attr('href'), '...', function(response) {
        // $(this).data('my_data') == undefined  :-(
    });
});

But in the callback ‘my_data’ is undefined. Am I just doing something wrong or will this not work? What is the best way to go about this?

Thanks.

Answer 1

this in the context of the post callback function isn’t the same this as in the context of the click callback.

I’d solve that problem by creating a closure:

// here `this` == some object

$(this).data('my_data', 'hey there');
$(this).click(function(e) {

    // here `this` == the same object,
    // because the click event handler is called in the context
    // of that object

    // a local variable to be contained in the closure
    var that = this;

    $.post($(this).attr('href'), '...', function(response) {

        // here `this` is something else, but now you can...
        $(that).data('my_data'); 

    });
});

The closure magic expands the scope of the local variable that into this callback function. This is a bit tricky but useful; have a google on closures in JS for many excellent explanations.