Question

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

$( 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。

Answer 1

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

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

在添加元素之前调用wavesurfer.init()（如在document.ready上）将无效，因为'#wave' + id元素尚不存在

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

1 个答案: