Question

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

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

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

'结束'HTML5事件在绑定后创建的元素上没有绑定

1 个答案: