具有动态创建内容的document.querySelector [英] document.querySelector with dynamically created content
问题描述
我有一个动态创建的使用jQuery的div,我试图使用Wavesurfer.js,它需要使用 document.querySelector
来选择元素。由于元素是使用jQuery动态创建的,因此选择器不能识别元素。
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 elements are dynamically created using jQuery, the selector does not recognise the elements.
$( document ).ready(function() {
$("#audio").append('<div class="row" id="wave6" class="wave"></div>');
$('#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');
});
这是我的代码,当动态创建元素时,由jQuery分配 id
。 b $ b
This is my code so far. id
is assigned by jQuery when dynamically creating the elements.
推荐答案
确保您在广告后调用 wavesur.in()
d这个目标元素是这样的:
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');
在您之前调用 wavessurfer.init()
添加元素(就像document.ready)不会工作,因为'#wave'+ id
元素不存在
Calling wavesurfer.init()
before you add the element (like on document.ready) will not work because the '#wave' + id
element doesnt exist yet
这篇关于具有动态创建内容的document.querySelector的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!