Creé un pequeño proyecto favorito como reproductor de sonidos con jQuery y tengo algunos problemas con el evento "finalizado" de la etiqueta "audio". Mi código funciona pero no la última función con "terminado". No entiendo lo que está mal. Espero que la gente de stackoverflow me ayude a confirmar este problema.
Es mi código:
$(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);El problema se debe a que los eventos multimedia, como los ended en este caso, no aumentan el DOM, por lo que no puede usarlos en controladores de eventos delegados. Fuente
Para que el código funcione, deberá adjuntar el evento ended directamente al elemento de audio para que el controlador funcione como espera.
Cambié mi código, ahora funciona pero solo una vez. Esta función solo funciona una vez.
$(document).on('click', '.button-play', function () { $(this).next('.play-audio').on('ended', function () { $(this).prev('.button-play').toggle(); $(this).next('.button-pause').toggle(); }); });