$（this）选择器问题jquery

我在这里有这个简单的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 

    } 

});

来源

2011-03-20 luca

哇，7个答案在10分钟内... – mattsven 2011-03-20 15:56:11

是啊，基本上都相同 – jondavidjohn 2011-03-20 16:00:32

我会做这样的，店里$(this)在一个变量中，所以你可以在整个函数中使用它，而不必每次都执行一次jQuery查找，而且你也不必依赖范围来为提供正确的元素

$(".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只有一次也是一种性能增强

来源

2011-03-20 15:47:12 jondavidjohn

尝试增加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 

    } 
});

来源

2011-03-20 15:46:24 Josh

生病try..but至极的解释是？ – luca 2011-03-20 15:47:40

您的代码与OP – jondavidjohn 2011-03-20 15:48:07

这将使其工作：

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

    } 

}

来源

2011-03-20 15:47:33

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

来源

2011-03-20 15:49:02 JohnP

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

来源

2011-03-20 15:49:19 BenM

完全相同实际上，JQuery并没有在API中为“this”强加任何意义，因为事件处理程序指向事件被触发的DOM对象，但是来自其他API指向'current'元素（请参阅'$ .each'），如果很难猜测JQuery，那么它将指向'window'对象。 – CarlosZ 2011-03-20 15:54:02

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

来源

2011-03-20 15:49:37 David

您可以一个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 

     } 
});

来源

2011-03-20 15:50:22 CarlosZ

$（this）选择器问题jquery

回答

相关问题