Html5 audio bind timeupdate before element exists

Question

im trying to associate the "timeupdate" event with an audio tag that does not yet exist. I used to do it like this:

$("body").on("click","#selector", function(e) { }); 

I tried this with an audio tag:

 $("body").on("timeupdate", ".audioPlayerJS audio", function(e) { alert("test"); console.log($(".audioPlayerJS audio").prop("currentTime")); $(".audioPlayerJS span.current-time").html($(".audioPlayerJS audio").prop("currentTime")); }); 

This does not work. Should this work? Or what am I doing wrong?

Any help is appreciated.

There is fiddel for you: jsfiddel

Answer 1

Apparently, media events (those related to audio or video, such as play , pause , timeupdate , etc.) do not become bubbling. You can find an explanation for this in the answer to this question .

Therefore, using my solution, I captured the timeupdate event,

 $.createEventCapturing(['timeupdate']); $('body').on('timeupdate', '.audioPlayerJS audio', updateTime); // now this would work. 

Jsfiddle demo

code for capturing an event (taken from another SO answer):

 $.createEventCapturing = (function () { var special = $.event.special; return function (names) { if (!document.addEventListener) { return; } if (typeof names == 'string') { names = [names]; } $.each(names, function (i, name) { var handler = function (e) { e = $.event.fix(e); return $.event.dispatch.call(this, e); }; special[name] = special[name] || {}; if (special[name].setup || special[name].teardown) { return; } $.extend(special[name], { setup: function () { this.addEventListener(name, handler, true); }, teardown: function () { this.removeEventListener(name, handler, true); } }); }); }; })();