jQuery on vs bind for invalid event type

jquery events bind

drummondj · Feb 5, 2014 · Viewed 13.5k times · Source

Given the following HTML:

<form>
  <input type="number" required>
</form>

The following javascript works fine:

(function( jQuery ) {

    jQuery("input").bind("invalid", function(event) {
        console.log(event.type);
    });

})( jQuery );

But this javascript code does not:

(function( jQuery ) {

    jQuery("form").on("invalid", "input", function(event) {
        console.log(event.type);
    });

})( jQuery );

Anyone got any idea why?

EDIT: Updated fiddle to correct one: http://jsfiddle.net/PEpRM/1

Answer

The invalid event does not bubble, it says so in the documentation, so delegated event handlers won't work as the event won't bubble up.

This should work

jQuery("form input").on("invalid", function(event) {
    console.log(event.type);
});