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

Question

After page load I set that all anchors should block screen using the plugin jquery-blockui 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?

Answer 1

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);

Answer 2

You can do it in two steps. First, remove all handlers from the click event:

$("a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close").off('click');

Then, optinally, assign your own handler to prevent later bindings

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

Answer 3

You have two options

1) Create a new target for blockUI

    $("a").on("click", $.blockUI); // Change "a" to something else like "a.target"

2) Change a.ui-multiselect-none, a.ui-multiselect-all, a.ui-multiselect-close to perform the same functionality without the need of being anchortags.