How can I fix trouble with event ended with jQuery?-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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