Document.queryselector With Dynamically Created Content

I have a div that is dynamically created that is using jQuery and I am trying to use Wavesurfer.js which requires the element to be selected using document.querySelector. Since the

Solution 1:

Make sure you are calling wavesurfer.init() after you add the targeted element to the page. Something like this:

$('#somecontainer').append('<div id="wave1"></div>')
var id=1;

var wavesurfer = Object.create(WaveSurfer);

  wavesurfer.init({
      container: document.querySelector('#wave' + id),
      waveColor: 'violet',
      progressColor: 'purple'
  });

  wavesurfer.on('ready', function () {
      wavesurfer.play();
  });

  wavesurfer.load('example/media/demo.mp3');

Calling wavesurfer.init() before you add the element (like on document.ready) will not work because the '#wave' + id element doesnt exist yet