Question

我在这里有这个简单的jquery函数。点击一个按钮，我想在ajax之前提醒自己的类，再次继续...但在最后一个情况下选择器“$（this）”不起作用，警报返回“undefined” ..

为什么？

$(".button").live("click",function(){

alert($(this).attr('class')); //returns "button"
 $.ajax({
    type: "POST",
    url: myUrl,
    data: myData,
    cache: false,
    success: function(html)
    {
                alert($(this).attr('class')); //returns undefined

    }

});

Answer 1

我会这样做，将$(this)存储在一个变量中，这样你就可以在整个函数中使用它，而不必每次都执行jQuery查找，而且你也不必依赖于提供的范围$(this)

的正确元素

$(".button").live("click",function(){
    var button = $(this);
    alert(button.attr('class')); //returns "button"
    $.ajax({
        type: "POST",
        url: myUrl,
        data: myData,
        cache: false,
        success: function(html)
        {
            alert(button.attr('class')); //should also return "button"

        }
    });
});

仅包装this一次也是性能提升

Answer 2

这将使其有效：

$(".button").live("click", function() {

    var button = this;

    $.ajax({
        type: "POST",
        url: myUrl,
        data: myData,
        cache: false,
        success: function(html) {
            alert($(button).attr('class')); 
        }
    });

});

您不能在嵌套函数中使用this引用。 success函数是嵌套函数，它有自己的this值。如果需要引用该嵌套函数内的按钮，则必须声明一个局部变量（如button）。

function clickHandler() {

    // this == element that was clicked

    function ajaxHandler() {

        // this != element that was clicked 

    }

}

Answer 3

在声明功能时尝试添加var self = $(this);，然后使用self代替$(this)

所以你的代码看起来像这样：

$(".button").live("click",function(){

var self = $(this);

alert($(this).attr('class')); //returns "button"
 $.ajax({
    type: "POST",
    url: myUrl,
    data: myData,
    cache: false,
    success: function(html)
    {
                alert(self.attr('class')); //returns undefined

    }
});

Answer 4

很多人已经为此发布了解决方案，所以我不会发布代码。只是想提到原因是因为成功方法是回调，你的$（this）的上下文不再有效。因此，您需要将其分配给变量并将其存储以供您自己使用。

Answer 5

仅在引用DOM中的HTML对象时才存在

$(this)。由于您已尝试在AJAX调用的成功函数中使用，$(this)没有引用。例如，在下面的代码中，$(this)引用了jQuery选择器返回的项：

$('.button').each(function() {
    alert($(this));
});

您需要使用选择器返回全局范围内的项目，然后将其传递给AJAX调用中的success函数：

var myButton = $('.button');

$.ajax({
    type: "POST",
    url: myUrl,
    data: myData,
    cache: false,
    success: function(html) { alert(myButton.attr('class')); /* returns button */ }
});

Answer 6

查看context部分here。基本上，您的代码中似乎发生的事情是this的引用不再适用。考虑到在异步处理AJAX回调时代码的上下文已经移动，这是有道理的。将context明确设置为.ajax()调用中的特定对象将在回调函数中引用上下文。

Answer 7

您可以将context: this属性添加到传递给$.ajax调用的哈希，这样success句柄就可以正确设置上下文，或者您也可以执行某些操作像：

success: $.proxy(function(html) {  // using $.proxy will bind the function scope to this
    alert($(this).attr('class'));
}, this);

或者，我见过的另一种技术：

$(".button").live("click",function(){
    var self = this;
    alert($(self).attr('class')); //returns "button"
    $.ajax({
        type: "POST",
        url: myUrl,
        data: myData,
        cache: false,
        success: function(html)
        {
                alert($(self).attr('class')); //returns undefined

        }
});

$（this）selector问题jquery

7 个答案: