Question

Possible Duplicate:
how to access the $(this) inside ajax success callback function

I have a code like this:

$('.each_button').click(function(){

$.ajax({ type: 'POST', url: process.php, data: data, success: function(data){

/////
       }
   })
});

How can I access the very $('.each_button') that triggered the event? I tried $(this) but it doesn’t work, probably because it’s inside of another function..

Thanks a lot in advance.

Answer 1

Everyone wants to use a variable for some reason. This isn’t necessary.

$('.each_button').click(function(){

    $.ajax({
        context: this, // <-- do this instead...
        type: 'POST', 
        url: process.php, 
        data: data, 
        success: function(data) {
               // ...now 'this' is the element you want
            alert(this.className);
        }
    });

});

---

Or use $.proxy if you prefer…

$('.each_button').click(function(){

    $.ajax({
        type: 'POST', 
        url: process.php, 
        data: data, 
        success: $.proxy(function(data) {
               // ...now 'this' is the element you want
            alert(this.className);
        }, this) // <-- bind the context
    });

});

---

One benefit to these approaches is that it lets you reuse the success function…

function ajax_success(data) {
    alert(this.className);
}

$('.each_button').click(function(){
    $.ajax({
        context: this,
        type: 'POST', 
        url: process.php, 
        data: data, 
        success: ajax_success
    });
});