How come $(this) is undefined after ajax call

Question

I am doing an ajax request when an anchor tag is clicked with an ID set to href. Btw, this anchor tag is dynamically created.

Answer 1

The context of the click event handler (the object that this refers to in that handler) is not propagated to your AJAX success callback.

You can capture the value of this from the caller by assign it to a local variable, or you can explicitly propagate it by passing this in the context option to $.ajax():

$.ajax({
    url: window.config.AJAX_REQUEST,
    type: "POST",
    data: {
        action: "DELCOMMENT",
        comment: $("#commentText").val(),
        comment_id: $(this).attr("href")
    },
    context: this,
    success: function(result) {
        $(this).fadeOut("slow");  // Works, since 'this' was propagated here.
    }
});

Answer 2

You should try

$('.commentDeleteLink').live('click', function(event) {
    event.preventDefault();
    var result = confirm('Proceed?');
    var that = this;
    if ( result ) {
        $.ajax({
            url: window.config.AJAX_REQUEST,
            type: "POST",
            data: { action       : 'DELCOMMENT',
                    comment      : $('#commentText').val(),
                    comment_id   : $(this).attr('href') },
            success: function(result) {
                alert($(that).attr('href'));
                //$(that).fadeOut(slow);
            }
        });
    }
});

because this in the callback is not the clicked element, you should cache this in a variable that that you can re-use and is not sensible to the context

Answer 3

Scope change inside the function.

Cache the link object and refer to it inside of the ajax request.

Answer 4

$(this) is called using this inside of the function. Here is the fix :

$('.commentDeleteLink').live('click', function(event) {
    var myRef = this;

    event.preventDefault();
    var result = confirm('Proceed?');

    if ( result ) {
        $.ajax({
            url: window.config.AJAX_REQUEST,
            type: "POST",
            data: { action       : 'DELCOMMENT',
                    comment      : $('#commentText').val(),
                    comment_id   : $(this).attr('href') },
            success: function(result) {
                alert($(myRef).attr('href'));
                //$(this).fadeOut(slow);
            }
        });
    }
});

Answer 5

You are in the AJAX function, so your have to assign the $(this) of the click function to a variable first if you want to use $(this) there

$('.commentDeleteLink').live('click', function(event) {
    ....
    var current = $(this);
    $.ajax({
        // You can use current here
    });
});