amplitudejs icon indicating copy to clipboard operation
amplitudejs copied to clipboard

Adding a list of songs dynamically does not show all meta information like name

Open podcasthosting opened this issue 5 years ago • 0 comments

Issue description

After init of AmplitudeJS

Amplitude.init({contains a list of songs});

I read the list of songs with

Amplitude.getSongs()

and dynamically add a HTML list with:

    let list = document.getElementById('list');
    let i = 0;
    songs.forEach(function(song) {
      list.insertAdjacentHTML('beforeend', getPlaylistItem(song, i++));
    });

getPlaylistItem() looks like this simplified:

function getPlaylistItem(song, index) {
  return '<div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="' + index + '">'
        + '<div class="song-meta-container">'
        + '<span class="song-name" data-amplitude-song-info="name" data-amplitude-song-index="' + index + '"></span>'
        + '</div>'
        + '</div>'
      ;
}

After that is finished I call

Amplitude.bindNewElements();

which successfully adds listeners to the new HTML. I can click the list items to play and pause songs. What does not work, is displaying the song name.

I tried with a static version where the HTML is hard-coded. There it works fine.

Environment

I tested with Chromium 76.0 Firefox 68.0

  • Amplitude.js Version:

Amplitude.getVersion() "5.0.2"

A screenshot of my rendered list without the name: image

Thank you for your outstanding work! I´d be really great if you could look into this.

podcasthosting avatar Aug 31 '19 12:08 podcasthosting