Javascript '；结束'；HTML5事件未绑定到绑定后创建的元素上_Javascript_Jquery_Html_Html5 Audio

Javascript '；结束'；HTML5事件未绑定到绑定后创建的元素上

javascript jquery html

Javascript '；结束'；HTML5事件未绑定到绑定后创建的元素上,javascript,jquery,html,html5-audio,Javascript,Jquery,Html,Html5 Audio,我正在研究一些在线mp3播放列表解决方案，我有一些奇怪的问题。我想在所有已存在或将来将存在的音频元素上绑定“已结束”事件。策略是在现有元素播放结束后添加新的音频元素。代码如下所示： <!DOCTYPE HTML> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> &l

我正在研究一些在线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>


$（“.playable”）.on（'end'，function（）{
var id=$（this.find（'source'）.attr（'rel'）；
$（“#音频内容”）。附加（“”）；
$（“[rel=“+（parseInt（id）+1）+”]）。最近（'audio'）[0]。播放（）
});

实际上，事件仅绑定在第一个元素上，而附加在事件中的第二个元素未绑定。请尝试以下操作：不要绑定事件，而是尝试更改音频的src，同时将此脚本包装在

文档中。就绪

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

奇怪的是，这种方式根本不绑定事件，甚至在绑定之前存在的第一个元素上也不绑定：/尝试将此脚本放入

文档中。准备好了吗。它完全没有绑定：/尝试替换$（“#audio_content”）。在（'end'，'.playable'，function（）{
上使用$（文档）。在（'end'，'.playable'，function（）{
上仍然没有。似乎音频元素根本不支持这种绑定方式。