Search code examples
jquerydebugginghtml-selectonchangeevent-delegation

jQuery event delegation with select elements?

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?

Solution

  • 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