JavaScript为指定class超链接绑定点击事件不生效问题求助

你绑定事件失败的核心原因是事件绑定执行时机不对：

• 你的代码在DOMContentLoaded页面初始加载完成的节点，就调用querySelectorAll('.individual_email_click')查找元素、绑定点击事件
• 但从HTML结构可以看到，初始页面加载时#emails-view是空容器，所有带individual_email_click类名的邮件链接，都是后续执行load_mailbox('inbox')时动态生成、插入到DOM里的
• 初始绑定事件的时候，这些动态a标签根本还不存在，查询到的节点列表是空的，自然无法绑定上点击事件

另外你的表单提交回调还有个隐性bug：箭头函数没有接收event参数就直接调用event.preventDefault()，运行时会报event未定义的错误。

推荐用事件委托的方式处理动态元素的事件绑定，不需要每次渲染新内容都重新绑定事件，性能更好也更省事：

1. 删掉原来DOMContentLoaded回调里这段无效的绑定代码

document.querySelectorAll('.individual_email_click').forEach(a =>{
  a.onclick = open_email;
});

2. 换成绑定到静态存在的父容器#emails-view上的委托事件，利用事件冒泡机制捕获子元素的点击行为

document.querySelector('#emails-view').addEventListener('click', function(e) {
  // 匹配点击的目标元素是否是带指定类名的链接，兼容a标签内嵌套子元素的点击场景
  const targetLink = e.target.closest('.individual_email_click');
  if (targetLink) {
    e.preventDefault(); // 阻止a标签默认的跳转行为
    open_email();
    // 如果需要获取当前点击邮件的id等信息，可以直接从元素的自定义属性上读取，比如targetLink.dataset.id
  }
});

3. 顺便修复表单提交的bug，把事件对象传入回调、优先阻止默认提交行为

document.querySelector('#compose-form').addEventListener('submit', (e) => {
  e.preventDefault();
  submit_email();
  load_mailbox('sent');
});

如果你不想用事件委托，也可以把原来绑定.individual_email_click点击事件的代码，移到load_mailbox函数内部，等所有邮件列表的DOM都动态插入完成之后再执行绑定，但这种方式每次切换邮箱重新渲染列表都要重新绑定一次，维护成本更高。

内容的提问来源于stack exchange，提问作者Shaun