$(this)选择器问题jquery

Question

我在这里有这个简单的 jquery 函数。单击一个按钮，我想在 ajax 之前提醒它自己的类，并在继承时再次提醒。但是最后一种情况下的选择器 "$(this)" 不起作用并且警报返回“未定义”..

为什么？

$(".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

很多人已经发布了解决方案，所以我不会发布代码。只是想提一下原因是因为由于 success 方法是回调，因此 $(this) 的上下文不再有效。所以你需要将它分配给一个变量并存储它以供你自己使用。

Answer 5

$(this) 仅在引用 DOM 中的 HTML 对象时才存在。由于您已尝试在 AJAX 调用的成功函数中使用，因此 $(this) 没有引用。例如，在下面的代码中 $(this) 引用 jQuery 选择器返回的项目：

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

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

var myButton = $('.button');

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

Answer 6

请查看此处的context部分。基本上，您的代码中似乎发生的情况是对 this 的引用不再适用。这是有道理的，因为在异步处理 AJAX 回调时代码的上下文已经发生变化。在 .ajax() 调用中将 context 显式设置为特定对象，将对上下文的引用携带到回调函数中。

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

        }
});