Prevent event firing for checkbox change

Question

I have two event handlers for one single checkbox. I want to first handler to prevent the second one from firing. Here is an example:

$("#address_cb").change(function(event) {
    alert('foo');
    event.preventDefault();
    event.stopPropagation();
    return false;
});

$("#address_cb").change(function(event) {
    alert('should never display');
});

$("#address_cb").trigger("change");


https://jsfiddle.net/zxzzLkky/5/

How can I achieve it?

try using "return false;" or use event.stopImmediatePropagation — Alexander Kludt, Jun 03 '16 at 13:58
@GüvenAltuntaş firstly: global gariables are bad idea. Secondly - it's jQuery, where `query` means `multiple variables`. I have a lot of checkboxes with 2 generic handlers for everyone. I can create an array with flags, of course, but it not seems to be a good thing. — Alex Zhukovskiy, Jun 03 '16 at 14:00
@AlexanderKludt `event.stopImmediatePropagation()`, worked, thank you for a comment. — Alex Zhukovskiy, Jun 03 '16 at 14:08

score 5 · Accepted Answer · edited May 23 '17 at 12:07

5

You need to use Even.stopImmediatePropagation()

$("#address_cb").change(function(event) {
   alert('foo');
   event.preventDefault();
   event.stopImmediatePropagation(); //Works
   return false; //would call event.preventDefault() and event.stopPropagation() but not stopImmediatePropagation()
});

as both of your events fire on the same event level. ~~As an alternative you might just return false for your callback as jQuery will care about the rest.~~

See event.preventDefault() vs. return false for differences on return false method

edited May 23 '17 at 12:07

Community

1
1

answered Jun 03 '16 at 14:12

Alexander Kludt

854
6
17

as I said it's only `stopImmediatePropagation()` which is working. `return false` and other just does nothing. – Alex Zhukovskiy Jun 03 '16 at 14:22
Oh yes, you are right - return false will only do stopPropagation and preventDefault. Will correct that. – Alexander Kludt Jun 03 '16 at 14:23

score 1 · Answer 2 · answered Jun 03 '16 at 14:13

Try using event.stopImmediatePropagation() instead of event.stopPropagation();. Please test it propely. Hope this work. Reference https://api.jquery.com/event.stopimmediatepropagation/

$("#address_cb").change(function(event) {
    alert('foo');
    event.preventDefault();
    event.stopImmediatePropagation();
    return false;
});

Prevent event firing for checkbox change

2 Answers2