jQuery的不檢測當前類

Question

我有一個JavaScript函數，我改變一個按鈕（<a href="..." class="button" id="placeOrdersButton">Button</a>）的類：點擊啓動按鈕時

function showOrderButtonActive(isActive) { 
     if (isActive) { 
      $("#placeOrdersButton").addClass("button"); 
      $("#placeOrdersButton").removeClass("buttonDisabled"); 
     } else { 
      $("#placeOrdersButton").removeClass("button"); 
      $("#placeOrdersButton").addClass("buttonDisabled"); 
     } 

我也有一個JavaScript函數來顯示加載面板：

$("a:not([target='_blank'], [class='buttonDisabled'])").on("click", function (e) { 
     window.LoadingPanel.Show(); 
    }); 

但是，當我的JavaScript函數的類更改爲buttonDisabled它仍然顯示加載面板。

爲什麼jQuery沒有檢測到當前的類名，我該如何做到這一點最好，最簡潔的方式？

Answer 1

運行代碼如下所示：

// [1] Retrieve all elements that match the selector *at the existing time* 
$("a:not([target='_blank'], [class='buttonDisabled'])") 

// [2] Attach a click event to those elements 
.on("click", function (e) { 
    window.LoadingPanel.Show(); 
}); 

因此，如果一個元素的類發生變化，也不會影響上面的代碼。上面的代碼已經運行並將事件附加到給定的元素。

一種解決方案是event delegation，在那裏你附加事件父元素，並在活動期間檢查選擇：

// [1] Retrieve document 
$(document) 

// [2] Attach a click event to the document that will fire 
//  if and only if the event started at or bubbled up through 
//  the given selector 
.on("click", "a:not([target='_blank'], [class='buttonDisabled'])", function (e) { 
    window.LoadingPanel.Show(); 
});