Question

I have been trying to use this inside an ajax function to refer the event target . but it seems that is not the way I think.

for example:

$('#test').live('click',function(){
     $.ajax({
         type:'post',
         url:
         data:...,
         success:function(mes){
             $(this).append('mes');
         }
     });
});

so here $(this) does not refer to the (‘#test’) selector. what does it refer to??
thanks for any explanation.

Answer 1

Inside the success callback this refers to a global object created by jQuery containing information about the AJAX rerquest. If you want to get the original DOM element you could capture it in a closure:

$('#test').live('click',function() {
    var $this = $(this);
    $.ajax({
        type: 'post',
        url: '/'
        data: { },
        success: function(mes) {
            $this.append('mes');
        }
    });
});

or if you don’t like closures you could pass it as a key/value pair of the request:

$('#test').live('click',function() {
    $.ajax({
        type: 'post',
        url: '/'
        data: { },
        myElement: $(this),
        success: function(mes) {
            this.myElement.append('mes');
        }
    });
});

This could be useful in scenarios where the success callback is not an anonymous function.