HTML5音频绑定timeupdate元素存在之前 [英] html5 audio bind timeupdate before element exists

问题描述

我尝试了timeupdate事件从音频标记，这并不存在绑定。我是用来做这种方式：

im trying to bind the "timeupdate" event from an audio tag, which doesn't exist yet. I was used to do it this way:

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

});

我想这与音频标签：

I tried this with the 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 doesn't work though. Is this supposed to work? Or what am I doing wrong?

任何帮助是非常AP preciated。

Any help is highly appreciated.

有对你是一个fiddel： jsfiddel

There is a fiddel for you: jsfiddel

推荐答案

显然，媒体活动（那些专门属于的音频或视频的如玩，暂停， timeupdate 等）没有得到起泡。你可以找到的解释，在回答这个问题。

Apparently media events( those specifically belonging to audio or video like play, pause, timeupdate, etc) do not get bubbled. you can find the explanation for that in the answer to this question.

因此​​，使用他们的解决方案，我抓住了 timeupdate 活动，

So using their solution, I captured the timeupdate event,

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

的jsfiddle演示

在code事件捕捉（从其他了这么回答）：

JSFiddle demo

the code for event capturing( taken from the other 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);
        }
      });
    });
  };
})();

这篇关于HTML5音频绑定timeupdate元素存在之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！