javascript - 从动态生成的音频标签监听audio.end

Question

我有一个页面，可以生成动态音频元素并将它们放入 DOM 中。这是我的代码正在执行的操作的粗略示例:

...
$("#container").html("<audio src='" + song.url + "'>");

在代码的后期，我想在该音频元素完成播放其文件时运行一些代码。但结束通风口似乎永远不会被解雇。

$("#container").on('ended', function() {
    console.log("this never gets called");
});

如何从动态生成的音频标记中捕获 ending 事件(或任何其他事件)？

编辑:如果我在创建音频元素后立即放置事件处理程序的声明，它就会起作用。

$("#container").html("<audio src='" + song.url + "'>");
$("#container audio").on('ended', function() {
    console.log("this does get called");
});

但是这个解决方案并不能完全解决我的问题，因为这个 on 调用需要进入 Chrome 扩展程序，而每次创建新的音频元素时都无法调用该扩展程序。

Answer 1

将音频标记添加到 on call 以允许事件委托(delegate)。

$("#container").on('ended', 'audio', function() {
    console.log("this never gets called");
});

http://api.jquery.com/on/