Events not firing when element does not exist initially

Question

I am using jQuerys .on() to bind event handlers to a video element. And everything works great: http://jsfiddle.net/me2loveit2/r0zt4qLg/3/

$('#testid').on('pause play ended', function (e) {
    $('body').append('<br>Event triggered: ' + e.type);
});

But if the video does not initially exist, the events are not firing: http://jsfiddle.net/me2loveit2/r0zt4qLg/5/

Which makes sense because according to the jQuery documentation on .on() : http://api.jquery.com/on/ It states:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

and it goes on to saying to use delegated events,

but as in my example(http://jsfiddle.net/me2loveit2/r0zt4qLg/5/) the parent element will never fire those events, because they do not apply there. Is there a way to make this work or is the only solution to attach the event handlers once the element exists?

The problem is that events from HTML5 media elements don't bubble. — Pointy, Aug 13 '14 at 19:42
I can't make it work with the solution of the "duplicate question" : http://jsfiddle.net/me2loveit2/r0zt4qLg/8/ — Philipp Werminghausen, Aug 13 '14 at 19:55

score 1 · Answer 1 · answered Aug 13 '14 at 19:39

1

you have delegate the events like this:

$(document).on('pause play ended','#testid', function (e) {
    $('body').append('<br>Event triggered: ' + e.type);
});

answered Aug 13 '14 at 19:39

Amin Jafari

7,157
2
18
43

This will not fix the problem. – Pointy Aug 13 '14 at 19:40
if you look at my second example, it is properly delegated, but like Pointy said that dose not fix the problem. – Philipp Werminghausen Aug 13 '14 at 19:41

Events not firing when element does not exist initially

1 Answers1