動態禁用/啓用使用委託事件的jQuery點擊處理程序

Question

我有一些頁面上可點擊的元素，應該在資源加載之前不能啓用。我的想法是使用.disabled類來初始化按鈕，然後在資源準備就緒時刪除它。與此同時，我會有一個處理程序，它會阻止事件傳播給其他處理程序。

問題是，即使我首先添加了.disabled處理程序，但在其他點擊處理程序之前我無法啓動它。

$("body").on('click','.disabled', function(e) { 
     alert('disabled'); 
     e.stopImmediatePropagation(); 
     return false; 
}); 
$('.clickable').click(function(e) { 
    alert('enabled'); 
}); 
// Call this when ready: 
//$('.clickable').removeClass('disabled'); 

FIDDLE：http://jsfiddle.net/4rJxU/7/

這首先會彈出一個「啓用」警報，然後一個「禁用」警告，這可能是因爲委派的事件由.clickable元素的父捕獲，並在稍後處理？

如何禁用使用委託事件的點擊處理程序？

Answer 1

這應該工作（無需殘疾人類）：

var clickEnabled = false; 

$('.clickable').on('click', function(e) { 
    if (!clickEnabled) { 
     alert('disabled'); 
     e.stopImmediatePropagation(); 
     return false; 
    } 
    else { 
     alert('enabled'); 
    } 
}); 

...而剛剛成立clickEnabled爲true，一旦任何你需要的是準備好了。

小提琴：http://jsfiddle.net/ehFGX/

如果你想要的是默認的點擊處理火一旦一切準備就緒，你可以刪除ELSE塊的上方，它會使用默認的繼續，如果你的處理程序不返回假。

如果您仍然喜歡使用禁用的類，那麼您可以檢查$（this）是否具有該類，而不是檢查！clickEnabled。

Answer 2

添加將保存實際狀態的變量不是更好嗎？

var isLoaded = false; 

$("body").on('click', function(e) { 
    if (isLoaded) { 
     alert('enabled'); 
    } else { 
     alert('disabled'); 
     e.stopImmediatePropagation(); 
     return false; 
    } 
}); 

然後在一切準備就緒時將其更改爲true。