Dynamically added audio elements don't acquire eventlisteners

Question

I have audio elements on my page to which I've added eventlisteners that listen for the "playing" event. If they are, I want to execute some stuff.

I'm also dynamically adding audio elements to my DOM (ajax fetch). However, for these elements that are newly added after the page load, the eventlsiteners do not work. I've looked into event delegation, I don't think I'm getting it right. Here's my current code [currently only applies listeners to elements loaded on page (re)load].

var audioFiles = document.getElementsByTagName('audio');

for (var i = 0; i < audioFiles.length; i++) {

    // function to execute if an audio file is played or resumed
    audioFiles[i].addEventListener("playing", function() {

        // save its ID in a variable
        var id = parseInt(this.id); // parseInt() turns this into an integer

        // then save the DOM element that was just played in a variable
        var filePlayed = $("#" + id);

        // then do some more things......
    }, true)
};

If jQuery is available to you, why are you making your life more difficult for yourself by using vanilla JS methods? — George, Oct 15 '14 at 09:02
@MaxArt https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events - see there is playing — Arun P Johny, Oct 15 '14 at 09:04
But I don't think the playing event is bubbled which mean you can make use of event delegation... http://stackoverflow.com/questions/11291651/why-dont-audio-and-video-events-bubble — Arun P Johny, Oct 15 '14 at 09:04
So the only option you have is to add those event handlers once the target elements are created — Arun P Johny, Oct 15 '14 at 09:06

Dynamically added audio elements don't acquire eventlisteners

0 Answers0