Chrome扩展中使用原生JS实现手风琴时点击事件无法触发问题

问题根因 #

你的点击事件无法触发是事件绑定时机早于动态DOM插入时机导致的：
DOMContentLoaded事件触发时，你点击getCurrentURL按钮的操作还没执行，#data容器是空的，此时通过querySelectorAll('.element')或者getElementById('btn')找不到任何动态生成的元素，相当于你给不存在的元素绑定了事件，自然不会触发。

解决方案1：DOM插入完成后再绑定事件 #

把手风琴的绑定逻辑抽成独立函数，在动态HTML插入到页面之后再调用：

// popup.js
document.addEventListener('DOMContentLoaded', function () {
  // 抽离绑定逻辑
  function bindAccordionEvents() {
    const elements = document.querySelectorAll('.element');
    const answers = document.querySelectorAll('.element .answer');
    elements.forEach((element) => {
      let btn = element.querySelector('.question button');
      let icon = element.querySelector('.question button i');
      var answer = element.lastElementChild;

      btn.addEventListener('click', () => {
        answers.forEach((ans) => {
          let ansIcon = ans.parentElement.querySelector('button i');
          if (answer !== ans) {
            ans.classList.add('hideText');
            ansIcon.className = 'fas fa-plus-circle';
          }
        });
        answer.classList.toggle('hideText');
        icon.className = icon.className === 'fas fa-plus-circle' ? 'fas fa-minus-circle' : 'fas fa-plus-circle';
      });
    });
  }

  document.getElementById('getCurrentURL').addEventListener('click', function () {
    chrome.runtime.sendMessage({}, function (response) {
      document.getElementById('data').innerHTML = response;
      // 插入DOM完成后再绑定事件
      bindAccordionEvents();
    });
  });
});

解决方案2：使用事件委托（更推荐） #

直接把事件绑定到页面初始化时就存在的父元素（比如#data容器）上，利用事件冒泡机制处理所有动态生成的子元素点击，不需要关心动态元素的插入时机：

// popup.js
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('getCurrentURL').addEventListener('click', function () {
    chrome.runtime.sendMessage({}, function (response) {
      document.getElementById('data').innerHTML = response;
    });
  });

  // 事件委托绑定到已经存在的#data容器
  document.getElementById('data').addEventListener('click', (e) => {
    // 判断点击的是手风琴的按钮或者按钮内的图标
    const btn = e.target.closest('.question button');
    if (!btn) return;

    const element = btn.closest('.element');
    const icon = btn.querySelector('i');
    const answer = element.querySelector('.answer');
    const allAnswers = document.querySelectorAll('.element .answer');

    allAnswers.forEach((ans) => {
      let ansIcon = ans.parentElement.querySelector('button i');
      if (answer !== ans) {
        ans.classList.add('hideText');
        ansIcon.className = 'fas fa-plus-circle';
      }
    });

    answer.classList.toggle('hideText');
    icon.className = icon.className === 'fas fa-plus-circle' ? 'fas fa-minus-circle' : 'fas fa-plus-circle';
  });
});

额外注意点 #

你动态生成DOM的代码里，每个手风琴模块的按钮、容器都用了相同的id属性（比如click-btn、click-parent），id是全局唯一的，重复id会导致选择器异常，建议把重复的id都改成class属性。

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