jQuery - multiple event listeners for same button

Question

Say I have an button with an id:

<input id='someButton' />

I want to attach an event listener on this button:

$('#form').on('click', '#someButton', function() { 
   alert("My listener called");

});

However, unbeknownst to me, someone previously wrote an event listener for this very same button:

$('#form').on('click', '#someButton', function() { 
   alert("Some other listener called"); 
});

I encountered some code that effectively does the same thing as above, and it seems like the first listener registered is the one that is used. Am I correct in assuming jQuery will always call the first event listener registered on a specific id (and only that listener)?

nope. in jquery you can add multiple event listeners..

honk31
– honk31

2013-03-12 18:41:34 +00:00
Commented Mar 12, 2013 at 18:41 — honk31
– honk31, Commented Mar 12, 2013 at 18:41

Blazemonger · Accepted Answer · 2013-03-12 18:41:13Z

7

Incorrect. jQuery will call ALL event listeners bound to an element, in the order they were bound.

To remove an existing event handler, use .off():

$('#form').off('click'); // click event handler(s) removed
$('#form').off(); // all event handler(s) removed

Be aware that events delegated from ancestor DOM elements won't be removed this way, though.

answered Mar 12, 2013 at 18:41

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

2 Comments

Frédéric Hamidi Over a year ago

For completeness, if one of the handlers invokes stopImmediatePropagation() on the event, the handlers further down the chain will not be called. It might be the cause of the behavior observed by the questioner.

Ben Siver Over a year ago

Thanks, it turns out both handlers were actually being called. Just an oversight on my part. No call was made to stopImmediatePropagation(), but that is useful knowledge to have!

Yahya KACEM · Accepted Answer · 2013-03-12 20:05:26Z

0

you could use mousedown:

$('#form').on('mousedown', '#someButton', function() { 
    alert("My listener called"); 
});

Hope this help.

edited Mar 12, 2013 at 20:05

answered Mar 12, 2013 at 18:52

Yahya KACEM

2,5018 gold badges34 silver badges63 bronze badges

Collectives™ on Stack Overflow

jQuery - multiple event listeners for same button

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related