CODEWITHSUNDEEP
javascriptjqueryhtml5-video
stephen.hanson
stephen.hanson

Reputation: 9624

jQuery on function for future media elements

I frequently use jQuery's on function to handle future events. Eg:

$(document).on('click', '.my-div', myHandler);

But, I'm not able to get this to work with the play or playing events on my video tag:

$(document).on('playing', 'video', function() {
  console.log('video playing');
});

The following works just fine, though does not bind to future elements:

$('video').on('playing', function() {
  console.log('video playing');
});

Does jQuery's future binding syntax of the on function only work with certain events, or does it lack suppoert for HTMLMediaElement object events? I'm using jQuery 1.11.2.

Upvotes: 2

Views: 78

Answers (1)

adeneo
adeneo

Reputation: 318342

It lacks support for events that doesn't bubble, and media events don't bubble because they don't make sense on any other elements except media elements, and media elements, like <audio> and <video> can't be nested, so there's no need to let the event bubble up the chain.

The way it works is that events bubble, on a click event it starts on the element you click, which is the event.target and continues all the way up to the document level.

This is so a click on an image inside an anchor for instance, also triggers the anchor.

The way event delegation works, is that it attaches the event handler to elements higher up the event chain, and then checks the event.target

Quick jQuery example

$('#parent').on('click', function(e) {
    if ( $(e.target).hasClass('child') ) func();
});

// is (somewhat) the same as

$('#parent').on('click', '.child', func);

Upvotes: 3

Related Questions