在动态添加的元素上使用 querySelectorAll答案

【问题标题】：use querySelectorAll on dynamically added element在动态添加的元素上使用 querySelectorAll
【发布时间】：2021-06-17 21:45:09
【问题描述】：

我想查询新添加的 div 调用 memberCard 类但 queryselectorall 是静态的，我不能这样做。如何解决这个问题？

var  elementsToShow = document.querySelectorAll('.memberCard')
function list(){
$.ajax({
    url:`http://localhost:8000/members`,
    type:"GET",
    success:function(members){
      
      members.forEach(member => {
      
        
        // Construct card content
         content = `
        <div class='memberCard'>
          <div style='background-image:url("${member.image}")' class='memberImage'>
          </div>
          <div class='memberDetails josephine-sans'>
            <h5>${member.name}</h5>
            <h6>${member.batch}</h6>
          </div>
        </div>
        `;
              container.innerHTML += content;
      });

}

【问题讨论】：

querySelectorAll() 仅检索在运行时存在的匹配元素，因此它不能静态存储并考虑未来的元素。请更详细地解释您的用例和具体问题。见How to Ask 和minimal reproducible example

标签： javascript ajax dom dynamic queryselector

【解决方案1】：

我猜你可以使用一些技巧，成功后更新 elementsToShow；

var  elementsToShow = document.querySelectorAll('.memberCard')
    function list(){
    $.ajax({
        url:`http://localhost:8000/members`,
        type:"GET",
        success:function(members){
          
          members.forEach(member => {
          
            
            // Construct card content
             content = `
            <div class='memberCard'>
              <div style='background-image:url("${member.image}")' class='memberImage'>
              </div>
              <div class='memberDetails josephine-sans'>
                <h5>${member.name}</h5>
                <h6>${member.batch}</h6>
              </div>
            </div>
            `;
            container.innerHTML += content;
            elementsToShow = document.querySelectorAll('.memberCard')
          });
    
    }

【讨论】：

【解决方案2】：

使用事件委托并在父元素上设置 querySelector。这是一个例子：

<div id="button-container"></div>

// event is added for the parent of #submit-button
document.querySelector("#button-container").addEventListener('click', 
function(e) {
    if(e.target.id == 'submit-button') {
    alert('CLICKED');
    }
});

// #submit-button is dynamically created
document.querySelector("#button-container").innerHTML = '<button id="submit- 
button">Submit</button>';

// click on #submit-button will now work
document.querySelector("#submit-button").click();

我建议您尝试更改您的代码，以便您可以这样使用它。

【讨论】：