具有动态创建内容的document.querySelector

我有一个动态创建的div使用jQuery，我试图使用Wavesurfer.js，它需要使用document.querySelector选择元素。 由于元素是使用jQuery动态创建的，因此选择器无法识别元素。

 $( document ).ready(function() { $("#audio").append('
'); $('#audio').on('DOMNodeInserted', 'div', function () { var id = 6; window['waveForm' + id] = Object.create(WaveSurfer); window['waveForm' + id].init({ container: document.querySelector('wave' + id), waveColor: 'violet', progressColor: 'purple' }); window['waveForm' + id].on('ready', function () { window['waveForm' + id].play(); }); window['waveForm' + id].load(id + '.mp3'); }); 

到目前为止这是我的代码。 id动态创建元素时由jQuery分配。

Answer 1

将目标元素添加到页面后，请确保调用wavesurfer.init() 。 像这样的东西：

 $('#somecontainer').append('
') 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'); 

在添加元素之前调用wavesurfer.init() （就像在document.ready上一样）将无法工作，因为'#wave' + id元素还不存在