html5音频在元素存在之前绑定timeupdate

我试图从音频标签绑定“timeupdate”事件，但尚未存在。 我习惯这样做：

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

我用音频标签尝试了这个：

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

但这不起作用。 这应该有用吗？ 或者我做错了什么？

任何帮助都非常感谢。

有一个fiddel给你： jsfiddel

Answer 1

显然媒体事件（那些特别属于音频或video的事件，如play ， pause ， timeupdate等）不会被冒泡。 你可以在这个问题的答案中找到解释。

所以使用他们的解决方案，我捕获了timeupdate事件，

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

JSFiddle演示

事件捕获的代码（取自其他SO答案）：

 $.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); } }); }); }; })();