I created a liitle pet-project like player for sounds with jQuery and have some problems with event "ended" of tag "audio". My code is working but not last function with "ended". I do not understand what is wrong. I hope a people from stackoverflow help me to confirm this problem.
Its my code:
$(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);
The issue is because Media events - such as ended in this case - do not bubble up the DOM, so you cannot use them in delegated event handlers. Source
For the code to work you will need to attach the ended event directly to the audio element for the handler to work as you expect.
I have changed my code, now its working but only one time. This function only works once.
$(document).on('click', '.button-play', function () {
$(this).next('.play-audio').on('ended', function () {
$(this).prev('.button-play').toggle();
$(this).next('.button-pause').toggle();
});
});