javascript - 为循环中的每个项目附加不同的事件监听器

Question

对于这个练习，我试图创建一个主要基于 javascript 的邮箱。获取所有电子邮件后，我使用 for-of-loop 显示它们。我现在需要做的是为每封电子邮件提供一个事件侦听器，当我单击邮件时运行“show_email”功能。

不幸的是，当我运行此代码然后尝试单击电子邮件时，它总是加载 email.id 为 1 的电子邮件，而不是根据循环位置加载 email.id 的电子邮件。

现在我不知道如何解决这个问题。谢谢你的帮助！

function inbox() {
  console.log('running function inbox');
  fetch('/emails/inbox')
  .then(response => response.json())
  .then(emails => {
    // looping through all mails to display them on the screen
    for (email of emails){
      const element = document.createElement('div');  
      element.innerHTML = `<div id="emails-item">
        <span id="emails-address">${email.sender}</span>
        <span id="emails-subject">${email.subject}</span>
        <span id="emails-timestamp">${email.timestamp}</span>
      </div>`;
      // Link to open individual email (here it does not do what I want)
      element.addEventListener('click', () => show_email(email.id));
      document.querySelector('#emails-view').append(element);
    }
    
  });
}

function show_email(id) {
  console.log(`Email ${id} is loaded...`)
}