Question

我见过类似的问题 - 但这不能解决我的问题！

我的页面上有音频，当一个结束时，我希望下一个开始，但我甚至无法触发结束......

我把代码剪切到了这个：

function DaisyChainAudio() {
    $().on('ended', 'audio','' ,function () {
        alert('done');
    });
}

从我的页面/代码调用（并执行，设置断点显示）。

据我所知，这应该在文档级别设置处理程序，因此来自任何“音频”标记的任何“已结束”事件（即使动态添加）也应该被捕获并向我显示警告......

但它永远不会发射。

修改

到目前为止，从ÇağatayGürtürk的建议中借鉴了一些......

function DaisyChainAudio() {
        $(function () {
        $('audio').on('ended', function (e) {
            $(e.target).load();
            var next = $(e.target).nextAll('audio');
            if (!next.length) next = $(e.target).parent().nextAll().find('audio');
            if (!next.length) next = $(e.target).parent().parent().nextAll().find('audio');
            if (next.length) $(next[0]).trigger('play');
        });
    });
}

我仍然想在文档级别设置它，所以我不需要担心在添加动态元素时添加它...

Answer 1

它不会触发的原因是，媒体事件（特别属于音频或视频的事件，如play，pause，{{ 1}}等）不要冒泡。你可以在this question的答案中找到相关的解释。

因此，使用他们的解决方案，我捕获了timeupdate事件，这将允许为动态添加的音频元素设置触发器。

ended

JSFiddle demo

事件捕获代码（取自其他SO答案）：

$.createEventCapturing(['ended']);  // add all the triggers for which you like to catch.
$('body').on('ended', 'audio', onEnded); // now this would work.

Answer 2

试试这个：

$('audio').on('ended', function (e) {
        alert('done');
        var endedTag=e.target; //this gives the ended audio, so you can find the next one and play it.
});

请注意，动态创建新音频时，应分配事件。一个快速而肮脏的解决方案是：

function bindEvents(){
$('audio').off('ended').on('ended', function (e) {
            alert('done');
            var endedTag=e.target; //this gives the ended audio, so you can find the next one and play it.
    });
}

并在创建/删除音频元素时运行bindEvents。

从jquery中的动态内容中捕获所有音频结束事件

2 个答案:

JSFiddle demo