Search code examples
javascriptjqueryevents

jquery not capturing all input value changes

After my document loads I have an event handler that captures changes to input values and updates an icons color to signal changes have occurred.

$(':input').on('input', stateChanged)

It's not capturing every inputs changes though, especially some that are nested in child divs or that have been dynamically created. However if I inject it from the developer console it recognises every input and all their changes.

Any thoughts on why it's not capturing some input changes and how to fix?

Solution

  • The on function only attaches listeners to elements that exist when it is called, not elements added later. But since events bubble, you can simply attach the listener to the entire document or some high-level element that is an ancestor of all your input elements.