javascript - 使用委托(delegate)事件动态禁用/启用 jquery 点击处理程序

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/

这将首先弹出“启用”警报，然后弹出“禁用”警报，大概是因为委托(delegate)事件由 .clickable 元素的父级捕获，因此稍后进行处理？

如何使用委托(delegate)事件禁用点击处理程序？

Answer 1

这应该可以工作(不需要禁用类):

var clickEnabled = false;

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

...一旦您需要的内容准备就绪，只需将 clickEnabled 设置为 true 即可。

fiddle :http://jsfiddle.net/ehFGX/

如果您想要的只是在一切准备就绪后触发默认的点击处理程序，您可以删除上面的 else block ，如果您的处理程序不返回 false，它将继续使用默认的处理程序。

如果您仍然喜欢使用禁用的类，您可以只检查 $(this) 是否具有该类，而不用检查 !clickEnabled。