javascript - html5 音频在元素存在之前绑定(bind) timeupdate

Question

我正在尝试从一个尚不存在的音频标签绑定(bind)“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"));
});

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

非常感谢任何帮助。

有一个 fiddle 给你:jsfiddel

Answer 1

显然是媒体事件(那些特别属于音频或视频的，比如play、pause、 timeupdate 等)不会冒泡。您可以在 this question 的答案中找到对此的解释.

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

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

JSFiddle demo

事件捕获的代码(取自其他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);
        }
      });
    });
  };
})();