jQuery on vs bind for invalid event type

Question

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 1

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);
});