'Ended' HTML5 事件未绑定在绑定后创建的元素上答案

【问题标题】：'Ended' HTML5 event is not binded on elements created after binding'Ended' HTML5 事件未绑定在绑定后创建的元素上
【发布时间】：2014-09-19 10:04:42
【问题描述】：

我正在研究一些在线 mp3 播放列表解决方案，但遇到了一些奇怪的问题。我想在所有存在或将来存在的音频元素上绑定“结束”事件。策略是在现有元素播放结束后追加新的音频元素。代码如下所示：

<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>

<div id='audio_content'>
<audio class='playable' controls >
  <source  rel='1' src="/files/1.mp3" type="audio/mpeg"/>
</audio>
</div>
<script type="text/javascript">


$(".playable").on('ended',function(){
  var id = $(this).find('source').attr('rel');
  $("#audio_content").append("<audio class='playable' controls ><source rel='"+(parseInt(id)+1)+"' src='/files/"+(parseInt(id)+1)+".mp3' type='audio/mpeg'/></audio>");
  $("[rel="+(parseInt(id)+1)+"]").closest('audio')[0].play()
});

</script>
</body>

</html>

实际上事件只绑定在第一个元素上，事件中附加的第二个元素没有绑定

【问题讨论】：

标签： javascript jquery html html5-audio

【解决方案1】：

试试这个：尝试更改音频的 src，而不是绑定事件，还可以将此脚本包装在 document.ready 中

$(document).ready(function(){
    $(".playable").on('ended',function(){
      var source = $(this).find('source');
      var id = $(source).attr('rel');
      var newId = parseInt(id)+1;

      //update rel and src
      $(source).attr('rel',newId);
      $(source).attr('src',"/files/"+newId+".mp3");
      $(this)[0].load()
      $(this)[0].play()
    });
});

【讨论】：

这很奇怪，但是这种方式根本不绑定事件，即使在绑定之前存在的第一个元素上：/
尝试将此脚本放入 document.ready 中，并在答案中更新
同样的事情。它根本没有绑定：/
尝试用$(document).on('ended','.playable',function(){替换$("#audio_content").on('ended','.playable',function(){
还是没有。似乎音频元素根本不支持这种绑定方式。