Accessing $(this) after success:function() when using $.ajax

Question

How can I access the value of $(this) after success: function() when using jquery? No matter what I\'ve tried, it appears I cant do it.

$(\'.add\').click(functio         


        

Answer 1

Save this to a variable before making the ajax call and use that instead:

$('.add').click(function() {
    var self = this; // save this as self
    //etc etc
    $.ajax({
            type:"GET",
            url:"/",
            data:data,
            dataType: 'json',
            beforeSend:function(html){
                //Nothing here right now
            },
            success: function(){
                // use self instead of this
                $(self).parent("div").after("<div class='flag'>I'm the new one.</div>");
            },

Answer 2

This is a problem with scope. You need to assign this to a variable within the scope of where it is accessible. Then use that variable in child functions.

Note I've used _that

This should work, please comment if it doesn't.

 $('.add').click(function() {
    var _that = this;
    $.ajax({
        type:"GET",
        url:"/",
        data:data,
        dataType: 'json',
        beforeSend:function(html){
            //Nothing here right now
        },
        success: function(){
            $(_that).parent("div").after("<div class='flag'>I'm the new one.</div>");
        },
    });
 });

Answer 3

"this" inside your ajax success is not the same "this" outside.

Different scopes...

There is a nice solution for this question.

$('.add').click(function() {
var that = $(this);
//do whatever you want :]

 $.ajax({
        type:"GET",
        url:"/",
        data:data,
        dataType: 'json',
        beforeSend:function(html){
            //Nothing here right now
        },
        success: function(){
            that.parent("div").after("<div class='flag'>I'm the new one.</div>");
        },

  });
});