ajax 调用后 $(this) 为何未定义答案

【问题标题】：How come $(this) is undefined after ajax callajax 调用后 $(this) 为何未定义
【发布时间】：2012-04-07 07:26:32
【问题描述】：

当单击 ID 设置为 href 的锚标记时，我正在执行 ajax 请求。顺便说一句，这个锚标记是动态创建的。

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

当点击锚标记时，会执行以下代码：

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

当我尝试显示 $(this).attr('href') 时，它说它是“未定义的”。我真正想做的是淡出锚标记，但是当我调查 $(this) 的值时，它是“未定义的”。

上面的 sn-p 有什么问题？

【问题讨论】：

this 在成功处理程序中是处理成功的函数，而不是您单击以触发 ajax 请求的原始 html 元素。函数没有“href”属性。
Jquery AJAX call: $(this) does not work after success的可能重复
Ajax jquery success scope的可能重复

标签： jquery ajax this undefined

【解决方案1】：

你应该试试

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

因为回调中的this不是被点击的元素，你应该将this缓存在一个变量that中，你可以重复使用并且对上下文不敏感

【讨论】：

【解决方案2】：

$(this) 在函数内部使用 this 调用。这是修复：

$('.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】：

click 事件处理程序的上下文（this 在该处理程序中引用的对象）不会传播到您的 AJAX 成功回调。

您可以通过将this 的值分配给局部变量来从调用方捕获它，或者您可以通过将context 选项中的this 传递给$.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】：

你在AJAX函数中，所以如果你想在那里使用$(this)，你必须先将点击函数的$(this)分配给一个变量

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

【讨论】：

【解决方案5】：

函数内部的作用域变化。

缓存链接对象并在 ajax 请求中引用它。

【讨论】：