具有动态创建内容的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屋！