为什么通过AJAX加载到div中的HTML无法触发绑定的JavaScript事件？

你初始编写的折叠菜单点击事件绑定代码是在页面首次加载完成时就执行的，此时AJAX请求还未返回、动态菜单内容尚未插入到页面中，代码找不到后续动态加载的.collapsible类按钮，自然没有给新元素绑定点击事件，所以点击后没有响应。

方案1：AJAX加载完成后重新绑定事件 #

把绑定折叠事件的逻辑封装成独立函数，在AJAX成功插入菜单内容后主动调用该函数即可。

1. 封装绑定函数，替换原来的事件绑定代码：

// 封装折叠菜单事件绑定逻辑
function bindCollapsibleEvent() {
  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}

// 页面初始加载时，绑定已有元素的事件
bindCollapsibleEvent();

2. 修改AJAX代码，插入内容后调用绑定函数：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'menu.html', true);
xhr.onreadystatechange = function () {
    if (this.readyState !== 4) return;
    if (this.status !== 200) return;
    document.getElementById('menu').innerHTML = this.responseText;
    // 新内容插入完成后，重新绑定事件
    bindCollapsibleEvent();
};
xhr.send();

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

直接把事件绑定到页面初始就存在的父元素（比如#menu容器）上，利用事件冒泡机制自动匹配动态新增的元素，无需每次新增内容后重复绑定。
直接把原来给.collapsible挨个绑定事件的代码替换为下面这段即可，无需修改原有AJAX逻辑：

// 绑定到页面加载时就存在的父容器#menu上
document.getElementById('menu').addEventListener('click', function(e) {
  // 仅当点击的是折叠按钮时才触发逻辑
  if (e.target.classList.contains('collapsible')) {
    e.target.classList.toggle("active");
    var content = e.target.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  }
})

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