How come $(this) is undefined after ajax call

问题

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?

回答1:

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

回答2:

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

回答3:

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

回答4:

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

回答5:

Scope change inside the function.

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

来源：https://stackoverflow.com/questions/9827291/how-come-this-is-undefined-after-ajax-call

标签

jquery

ajax

this

undefined