Home dynamic html5 audio playlist with ajax

# dynamic html5 audio playlist with ajax

jedrek
1#
jedrek Published in 2018-02-12 22:53:16Z
 I’d like to create a simple html5 audio player that plays songs of a dynamic playlist. I have this page that loads properly and if a link is clicked the song starts to play and When it ends next one in list starts.. all good. I also have this search function that returns song links from a db via php in a new dynamicly created list on the same page.. that works too. But as soon as one of ”the new” (search results) links are clicked, the song will open in a new browser tab. I’d like it to open in the ”default” player as all other tunes are doing. What am I missing here? I think something must be misplaced in my code but I cannot figure out what.. Below is my code... index.php 
Search:
Niels Bom
2#
Niels Bom Reply to 2018-02-12 23:15:05Z
 I think the problem is that this piece of JS: playlist.find('a').click(function (e) { // etc  ..is only executed during init(). So the event binding works, but only for all a elements in li elements that are there from the beginning. Any li's that are added to the page later on do not have that event bound to them. The solution would be to not bind to the a element or li element but bind to the ul element and then in JS figure out which element inside of the list was clicked and then perform the JS action on that. Then it doesn't matter whether the list item was there from the beginning or was added later. You should be able to do that because of "bubbling". See here for more info: https://javascript.info/bubbling-and-capturing Good luck!
 You need to login account before you can post.
Processed in 0.314181 second(s) , Gzip On .