use querySelectorAll on dynamically added element

Question

I want to query newly added div having memberCard class call but queryselectorall being static, i am not able to do so.How to resolve this problem?

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;
      });

}

Answer 1

You can use some hack i guess, update elementsToShow after success;

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')
          });
    
    }

Answer 2

Use Event delegation and set the querySelector on the parent element. This is an example:

<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();

I suggesst you try to change your code, so you can use it this way.