Dynamically disabling/enabling jquery click handlers using delegated events

Question

I have a number of clickable elements on a page that shouldn't be enabled until a resource gets loaded. My idea was to initialize the buttons with a .disabled class, which I would then remove when the resource was ready. In the meantime, I'd have a handler on the .disabled click event that would prevent event propagation to the other handlers.

The problem is, even though I add the .disabled handler first, I can't get it to fire before the other click handlers.

$( "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/

This will pop up an 'enabled' alert first, and then a 'disabled' alert, presumably because the delegated events are captured by the parent of the .clickable elements, and are thus handled later?

How can I disable click handlers using delegated events?

If you are calling a function after the resource is loaded, why not just attach your click handlers then? — Aust
– Aust, Commented Oct 17, 2013 at 17:21

mayabelle · Accepted Answer · 2013-10-17 17:17:56Z

1

This should work (without the need for the disabled class):

var clickEnabled = false;

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

... And just set clickEnabled to true once whatever you need is ready.

Fiddle: http://jsfiddle.net/ehFGX/

If all you want is for the default click handler to fire once everything is ready, you can just remove the else block above and it will continue with the default if your handler doesn't return false.

If you still prefer to use the disabled class, you can just check if $(this) has that class instead of checking !clickEnabled, too.

answered Oct 17, 2013 at 17:17

mayabelle

10.1k10 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yarin Over a year ago

Bingo- I ended up keeping the .disabled class, but checking for it in the revised handler just like you describe. jsfiddle.net/4rJxU/9

Elon Than · Accepted Answer · 2013-10-17 17:08:10Z

1

Isn't it better to add variable which will hold actual status?

var isLoaded = false;

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

And then change it to true when everything is ready.

answered Oct 17, 2013 at 17:08

Elon Than

9,8154 gold badges29 silver badges37 bronze badges

2 Comments

Yarin Over a year ago

That doesn't solve my problem. I could just as easily check for the .disabled class in each handler as well. I wanted a solution that wouldn't require a check in each handler, but that would let me turn on/off all the handlers en masse.

Christophe Over a year ago

this switch could work well if applied to $(".clickable") instead of $("body")

Collectives™ on Stack Overflow

Dynamically disabling/enabling jquery click handlers using delegated events

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related