如何修复以jQuery结束的事件的问题

Question

我用jQuery为声音创建了一个类似liitle-pet项目的播放器，并且在事件方面遇到了一些问题"结束"；标签"；音频"；。我的代码正在工作，但不是最后一个使用"；结束"；。我不明白出了什么问题。我希望有一个来自斯塔克夫弗洛的人帮我确认这个问题。

这是我的代码：

$(document).on('click', '.button-play', function () {
$(this).next('.play-audio').trigger('play');
$(this).nextAll('.button-pause').toggle();
$(this).toggle();
});
$(document).on('click', '.button-pause', function () {
$(this).prev('.play-audio').trigger('pause');
$(this).prevAll('.button-play').toggle();
$(this).toggle();
});
$(document).on('ended', '.play-audio', function () {
$('.button-play').toggle();
$('.button-pause').toggle();
}, false);

Answer 1

问题是因为媒体事件(在本例中为ended(不会在DOM中冒泡，因此不能在委派的事件处理程序中使用它们。源

为了使代码正常工作，您需要将ended事件直接附加到audio元素，以便处理程序按预期工作。

Answer 2

我已经更改了我的代码，现在它可以工作了，但只有一次。此功能只能工作一次。

$(document).on('click', '.button-play', function () {
$(this).next('.play-audio').on('ended', function () {
$(this).prev('.button-play').toggle();
$(this).next('.button-pause').toggle();
});
});