Question

我在页面上有许多可点击元素，在加载资源之前不应启用这些元素。我的想法是使用.disabled类初始化按钮，然后在资源准备好后将其删除。与此同时，我在.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 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。

使用委派事件动态禁用/启用jquery点击处理程序

2 个答案: