时间戳

首页 > 解决方案 > Javascript - 在它应该发生之后发生的获取请求

javascript - Javascript - 在它应该发生之后发生的获取请求

问题描述

我还是 javascript 的新手，我有来自 CS50 的这个 javascript 问题，它应该打开一个邮箱，点击一封电子邮件应该打开电子邮件。我认为我的点击部分问题是正确的，但是当我打开我的页面并点击一封电子邮件时，它不会调用 open_mail() 函数。我已经解决了这个问题，因为在 DOM 完成加载后调用了异步的 load_mailbox 函数，所以从技术上讲，当 DOM 完成加载时，类 email-box 没有 div，但我不知道如何要解决这个问题，请有人帮忙。

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

// Use buttons to toggle between views
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);
document.querySelector('#compose-form').addEventListener('submit', send_mail);
document.querySelectorAll('.email-box').forEach(function(box) {
  box.addEventListener('click', function (){
     open_mail();
   })
 });

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


function load_mailbox(mailbox) {

fetch(`/emails/${mailbox}`)
.then(response => response.json())
.then(emails => {
document.querySelector('#email-content').innerHTML = "";
emails.forEach(inbox_mail);
})
};

 function inbox_mail(email) {
 const element = document.createElement('div');
 if (document.querySelector(`#email-${email.id}`) === null) {

  element.id = (`email-${email.id}`);
  element.className = ("email-box");
  element.innerHTML = `<p>From ${email.sender}</p><p>${email.subject}</p><p>At ${email.timestamp} 
  </p>`;
    document.querySelector('#email-content').append(element);
    }
  }

标签： javascript

解决方案

我想说最简单的解决方案是将 addEventListener 放在创建具有类 .email-box 的元素之后的一个点，例如在为每封电子邮件运行 inbox_mail 之后的 .then 函数中

.then(emails => {
  document.querySelector('#email-content').innerHTML = "";
  emails.forEach(inbox_mail);

  document.querySelectorAll('.email-box').forEach(function(box) {
    box.addEventListener('click', function (){
      open_mail();
    });
  });

});

DOMContentLoaded 将在加载来自初始请求/响应的 DOM 时触发。当您创建元素并将它们附加到已加载的 DOM 时，您在 fetch 回调中所做的称为“DOM 操作”。

推荐阅读