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.

<a href="983" class="commentDeleteLink">delete</a>

When the anchor tag is clicked the following code is executed:

    $('.commentDeleteLink').live('click', function(event) {
        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($(this).attr('href'));
                    //$(this).fadeOut(slow);
                }
            });
        }
    });

When I tried to display $(this).attr('href') it says it's "undefined". What I really want to do is fadeOut the anchor tag but when I investigated the value of $(this) it is "undefined".

What could be wrong with the snippet above?

`this` within the success handler is the function handling the success, not the original html element you clicked on to the trigger the ajax request. a function has no 'href' attribute. — Marc B, Mar 22 '12 at 17:23
possible duplicate of [Jquery AJAX call: $(this) does not work after success](http://stackoverflow.com/questions/1392789/jquery-ajax-call-this-does-not-work-after-success) — JJJ, Mar 22 '12 at 17:24
possible duplicate of [Ajax jquery success scope](http://stackoverflow.com/questions/1570146/ajax-jquery-success-scope) — Felix Kling, Mar 22 '12 at 17:24

score 2 · Accepted Answer · answered Mar 22 '12 at 17:24

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

score 1 · Answer 2 · answered Mar 22 '12 at 17:23

$(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);
            }
        });
    }
});

score 1 · Answer 3 · answered Mar 22 '12 at 17:25

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.
    }
});

score 0 · Answer 4 · answered Mar 22 '12 at 17:25

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
    });
});

score 0 · Answer 5 · answered Mar 22 '12 at 17:39

0

Scope change inside the function.

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

answered Mar 22 '12 at 17:39

Rick

1,563
9
11

How come $(this) is undefined after ajax call

5 Answers5

Linked

Related