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

Posted 2023-02-21

【中文标题】在动态添加的元素上使用 querySelectorAll

【英文标题】：use querySelectorAll on dynamically added element

【发布时间】：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

【参考方案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();

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