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

我见过类似的问题——但这并不能解决我的问题

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

我将代码简化为：

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

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

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

但它从不开火

编辑

通过借鉴切阿泰·古尔蒂尔克的建议，到目前为止，我们已经做到了这一点

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');
        });
    });
}

我仍然希望在文档级别设置它，这样我就不必担心在添加动态元素时添加它了…

试试这个：

$('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。

它不触发的原因是，媒体事件（专门属于音频或视频的事件，如播放、暂停、时间更新等）不会冒泡。你可以在答案中找到解释

因此，使用他们的解决方案，我捕获了

end

事件，这将允许为动态添加的音频元素设置触发器

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

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

---

调用

.on（）

时，音频标签是否已经可用？jquery.com说：“事件处理程序只绑定到当前选定的元素；它们必须在代码调用.on（）时存在。”。但据我所知，$（）.on会将事件附加到文档根目录，因此任何结束（即使是动态添加的标记）都会冒泡并被捕获。您好，您知道为什么不能像其他事件一样在文档级别设置它吗？到目前为止，我已设法将“显示”和“行为”分开。在添加动态内容之前，在文档级别设置所有“行为”。try$（document）.on（'end'，'audio'，function（e）{alert（'done'）；}）；但据我所知，文档级事件并没有那么好。我总是使用我在回答中写下的方法。谢谢-$（）。on对其他一切都有效-可能音频有问题。。。但我用了你的建议，所以打勾：）

    $.createEventCapturing = (function () {
        var special = $.event.special;
        return function (names) {
            if (!document.addEventListener) {
                return;
            }
            if (typeof names == 'string') {
                names = [names];
            }
            $.each(names, function (i, name) {
                var handler = function (e) {
                    e = $.event.fix(e);

                    return $.event.dispatch.call(this, e);
                };
                special[name] = special[name] || {};
                if (special[name].setup || special[name].teardown) {
                    return;
                }
                $.extend(special[name], {
                    setup: function () {
                        this.addEventListener(name, handler, true);
                    },
                    teardown: function () {
                        this.removeEventListener(name, handler, true);
                    }
                });
            });
        };
    })();