Javascript 元素存在前html5音频绑定时间更新

我试图从一个音频标签绑定“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供您参考：

显然，媒体事件（那些专门属于音频或视频的事件，如

播放

，

暂停

，

时间更新

，等等）不会冒泡。你可以在答案中找到解释

因此，使用他们的解决方案，我捕获了

timeupdate

事件

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

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

---

看起来最简单的解决方案是在动态添加音频后声明事件处理程序。您只能在

音频

或

视频

（因此不在

正文

）和

上检测
时间更新
（'load'

不适用于委托事件，以便检测何时加载了新音频。或者可以创建一个自定义事件：。感谢您的回复，我稍后会检查它。我收到此错误：“Uncaught TypeError:（（jQuery.event.special[handleObj.origType]| |（中间值））.handle | | handleObj.handler）.应用不是一个函数“

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