jQuery event delegation with select elements?

Question

While doing some sanity tests I noticed that the following change event binding works:

$("body").on("change","input", function(){console.log(1)})

While the on event binding does not:

$("body").on("change","select", function(){console.log(1)})

Is there any workaround or explanation for this inconsistency?

Can you explain it better ? Maybe with some demo. – Ricardo Alvaro Lohmann Jan 04 '13 at 02:58 — Ricardo Alvaro Lohmann, Jan 04 '13 at 02:58
Is it specific to a particular browser? – Arun P Johny Jan 04 '13 at 03:03 — Arun P Johny, Jan 04 '13 at 03:03
Works for me in chrome http://jsfiddle.net/eHRCD/ – James Kleeh Jan 04 '13 at 03:03 — James Kleeh, Jan 04 '13 at 03:03
better run that sanity check again.. works fine – charlietfl Jan 04 '13 at 03:04 — charlietfl, Jan 04 '13 at 03:04

Paul Sweatte · Accepted Answer · 2017-06-01T14:05:42.830

Using the Event Listeners panel in the Elements tab of the Developer Toolbar, I discovered the root cause. There were two delegated change events both bound to the same select element which was wrapped inside a div container for styling. The event bound to the inner container returned false, which stopped propagation to the event bound to the outer container. I realized the inner binding was overkill, so I removed it to solve the problem.

References

jQuery event delegation with select elements?

1 Answers1