$（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

回答

相關問題