Search code examples
javascriptjqueryhtmljquery-blockui

Can you override certain action of an HTML element with given class via jQuery?

After page load I set that all anchors should block screen using the plugin so as to prevent multiple clicks from impatient user and avoiding unnecessary multiple requests to the server.

$("a").on("click", $.blockUI);

I'm also using the jquery ui multiselect widget and this widget uses anchors to check all options, uncheck all options, or close itself. Unfortunatelly, these anchors also fires my blockUI event. I tried to prevent the event from firing using the code below:

$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").on("click", function(e) {
    e.preventDefault();
});

In other words, I tried to stop the default event of the anchors marked with the widget classes, but that did not work. What actually worked was what I used below:

$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").on("click", $.unblockUI);

But this solution gives an effect on the screen as if it is flashing. Is there any way to make these links simply do not trigger the blockUI differently from every other anchors being an UX exception in the system?

Solution

  • If you never want those objects to trigger the blockui call, don't place the event listener on them in the first place. Use jQuery's :not selector:

    $("a:not(.ui-multiselect-none, .ui-multiselect-all, .ui-multiselect-close)").on("click", $.blockUI);