使用委托事件動態禁用/啟用 jquery 點擊處理程序

Question

我在頁面上有許多可點擊的元素，在加載資源之前不應啟用這些元素。 我的想法是使用.disabled類初始化按鈕，然后在資源准備好時將其刪除。 同時，我會在.disabled click 事件上有一個處理程序，以防止事件傳播到其他處理程序。

問題是，即使我首先添加了.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');

小提琴：http : //jsfiddle.net/4rJxU/7/

這將首先彈出一個“啟用”警報，然后是一個“禁用”警報，大概是因為委托事件被.clickable元素的父級捕獲，因此稍后處理？

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

Answer 1

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

var isLoaded = false;

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

然后在一切准備就緒時將其更改為true 。

Answer 2

這應該有效（不需要禁用類）：

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 塊，如果您的處理程序不返回 false，它將繼續使用默認值。

如果您仍然喜歡使用禁用的類，您可以只檢查 $(this) 是否具有該類，而不是檢查 !clickEnabled。