無法查詢JS動態創建的selector HTML元素

Question

我正在嘗試做我的課程項目，所以我是新手。

該項目正在創建一個電子郵件網站。

因此，在列出電子郵件后，用戶應該能夠單擊任何 email 以查看該 email。但是由於電子郵件列表是由 JS 動態生成的：

if (mailbox == "sent") {
    fetch('/emails/sent')
    .then(response => response.json())
    .then(emails => {

      for (let i=0; i<emails.length; i++) {
        const id = emails[i].id;
        const sender = emails[i].sender;
        const subject = emails[i].subject;
        const timestamp = emails[i].timestamp;
        document.querySelector('#emails-view').innerHTML += `
        <div>
          <a href="#">
            <div data-id="${id}" class=" row email-box">
              <div class=" col-2 email-sender">${sender}</div>
              <div class="col-3 email-subject">${subject}</div>
              <div class="col-7 email-timestamp">${timestamp}</div>
            </div>
          </a>
        </div>`;
      }
    })
  }

查詢選擇器不工作：

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('#emails-view > div:nth-child(2) > div').foreach(function(email) {
      email.onclick = function() {
        console.log('clicked')
      }
    });
  });

我在一個也是動態創建的簡單 h3 上試過這個，但它仍然不起作用。

  document.querySelector('#emails-view').innerHTML = `<h3 id="h3">${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

  document.querySelector('h3').addEventListener('click', () => console.log('clicked'));

這是我們的完整代碼：

document.addEventListener('DOMContentLoaded', function() {

  // Use buttons to toggle between views
  document.querySelector('h3').addEventListener('click', () => console.log('clicked'));
  


  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
  document.querySelector('#compose').addEventListener('click', compose_email);

  // By default, load the inbox
  load_mailbox('inbox');
});

function compose_email() {

  // Show compose view and hide other views
  document.querySelector('#emails-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'block';

  // Clear out composition fields
  document.querySelector('#compose-recipients').value = '';
  document.querySelector('#compose-subject').value = '';
  document.querySelector('#compose-body').value = '';

  document.querySelector('#compose-form').onsubmit = () => {
    
    fetch('/emails', {
      method: 'POST',
      body: JSON.stringify({
          recipients: document.querySelector('#compose-recipients').value,
          subject: document.querySelector('#compose-subject').value,
          body: document.querySelector('#compose-body').value
      })
    })
    .then(response => response.json())
    .then(result => {
        // Print result
        console.log(result);
    })
    
    load_mailbox('sent')
    return false;    
  }
}

function load_mailbox(mailbox) { 

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('#emails-view > div:nth-child(2) > div').foreach(function(email) {
      email.onclick = function() {
        console.log('clicked')
      }
    });
  });

  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#compose-view').style.display = 'none';

  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h3 id="h3">${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

  if (mailbox == "sent") {
    fetch('/emails/sent')
    .then(response => response.json())
    .then(emails => {

      for (let i=0; i<emails.length; i++) {
        const id = emails[i].id;
        const sender = emails[i].sender;
        const subject = emails[i].subject;
        const timestamp = emails[i].timestamp;
        document.querySelector('#emails-view').innerHTML += `
        <div>
          <a href="#">
            <div data-id="${id}" class=" row email-box">
              <div class=" col-2 email-sender">${sender}</div>
              <div class="col-3 email-subject">${subject}</div>
              <div class="col-7 email-timestamp">${timestamp}</div>
            </div>
          </a>
        </div>`;
      }
    })
  }

  else if (mailbox == "inbox") {
    fetch('/emails/inbox')
    .then(response => response.json())
    .then(emails => {
    
      for (let i=0; i<emails.length; i++) {
        const id = emails[i].id;
        const sender = emails[i].sender;
        const subject = emails[i].subject;
        const timestamp = emails[i].timestamp;
        document.querySelector('#emails-view').innerHTML += `
        <div>
            <div data-id="${id}" class=" row email-box">
              <div class=" col-2 email-sender">${sender}</div>
              <div class="col-3 email-subject">${subject}</div>
              <div class="col-7 email-timestamp">${timestamp}</div>
            </div>
        </div>`;
      }
    })
  }

  else if (mailbox == "archive") {
    fetch('/emails/archive')
    .then(response => response.json())
    .then(emails => {

      for (let i=0; i<emails.length; i++) {
        const id = emails[i].id;
        const sender = emails[i].sender;
        const subject = emails[i].subject;
        const timestamp = emails[i].timestamp;
        document.querySelector('#emails-view').innerHTML += `
        <div>
          <a href="#">
            <div data-id="${id}" class="row email-box">
              <div class=" col-2 email-sender">${sender}</div>
              <div class="col-3 email-subject">${subject}</div>
              <div class="col-7 email-timestamp">${timestamp}</div>
            </div>
          </a>
        </div>`;
      }
    })
  }
  document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.email-box').addEventListener('click', () => console.log('clicked'));
  });

}

function view_email(id) { 

  fetch(`/emails/${id}`)
  .then(response => response.json())
  .then(email => {
    // Print email
    console.log(email);

    // ... do something else with email ...
  });
}

Answer 1

只需使用事件委托：

const emailsView = document.querySelector('#emails-view');

//...

if (mailbox == "sent") 
  {
  fetch('/emails/sent')
  .then(response => response.json())
  .then(emails => 
    {
    for (let email of <emails) 
      {
      emailsView.innerHTML += `
        <div>
          <a href="#" class="email-infos">
            <div data-id="${email.id}" class="row email-box">
              <div class="col-2 email-sender">${email.sender}</div>
              <div class="col-3 email-subject">${email.subject}</div>
              <div class="col-7 email-timestamp">${email.timestamp}</div>
            </div>
          </a>
        </div>`;
      }
    })
  }


  //...


emailsView.onclick = evt =>
  {
  let emailInfos = evt.target.closest('a.email-infos')

  if (!emailInfos) return

  console.log( emailInfos.querySelector('email-sender').textContent
  console.log( emailInfos.querySelector('email-subject').textContent
  console.log( emailInfos.innerText )
  }

Answer 2

同樣對於選擇器，嘗試其中一個，它們的變體，或者在您想要的目標上放置一個class name 。

querySelectorAll('#emails-view .email-box')
querySelectorAll('#emails-view a')
querySelectorAll('#emails-view .clickable') // add a class name to your target