如何正确地将html5’结束’事件绑定到任何未来(jquery生成)元素?

标题解释了大部分内容。 我有一个链接列表,导致我通过javascript加载到页面中的video和音频文件。 html看起来有点像这样:

 ...  ...  ...   

我的javascript然后看起来如下。 我们的想法是,当您单击音频链接时,它将插入音频标记,当您单击video链接时,它将插入video标记。 单击页面上的任意位置可播放/暂停音频/video。 一切都有效,除了应该处理’已结束’事件的底部代码块。 这个想法是你在媒体完成后回到链接列表。 然而,似乎事件根本不会绑定。

 $(document).ready(function() { var mediablock; var playing = false; $(".video").on("click", function() { var link = $(this).attr("href"); $("#main").hide(); $("body").append(''); mediablock = $("#videoblock").get(0); mediablock.play(); playing = true; return false; }); $(".audio").on("click", function() { var link = $(this).attr('href'); $("#main").hide(); $("body").append('<audio id="audioblock" width="'+$(window).width()+'" height="'+($(window).height()-50)+'"'); mediablock = $("#audioblock").get(0); mediablock.play(); playing = true; return false; }); $(document).on("click", function() { if (playing) { mediablock.pause(); playing = false; } else { mediablock.play(); playing = true; } }); $(document).on("ended", "audio, video", function() { alert('test'); }); }); 

我尝试过不同的方法来绑定事件。 如上所述:

 $("audio, video").bind("ended", function() { alert('test'); }); $("audio, video").on("ended", function() { alert('test'); }); 

在所有这些尝试之后,我不再知道如何正确捕获此事件。 请帮我解决这个问题,以便继续我的音频/videowebapp。

提前致谢! 🙂

编辑:我解决了这个问题,没有重新创建video/音频标签,只是重新分配该标签的来源。 我在音频/video标签中给了一个类的两个源标签,然后更新了这些源标签的src属性。 事件绑定然后按预期工作。