javascript - 为什么使用脚本加载到 div 中的 html 不调用 javascript？

Question

我正在尝试创建一个可折叠菜单，我可以独立于加载它的任何页面进行编辑，而无需使用任何 iframe。我是网页设计新手；我熟悉 CSS 和 HTML，并且刚刚学习 JavaScript。我对 jQuery 或 AJAX 几乎不熟悉。

这是我用于可折叠菜单的脚本:

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";
    }
  });
}

.collapsible {
  background: none;
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
}
.content {
  margin-left: 18px;
  display: none;
  overflow: hidden;
}

<div id="menu">
  <button type="button" class="collapsible">Menu</button>
  <div class="content">
    <a href="link.html" class="menu">Option 1</a><br>
    <a href="link2.html" class="menu">Option 2</a>
  </div>
</div>

这工作正常，但是当我尝试使用 AJAX 将 html 加载到 div 时:

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;
};
xhr.send();

其中“menu.html”就是这个，没有别的:

<button type="button" class="collapsible">Menu</button>
<div class="content">
  <a href="link.html" class="menu">Option 1</a><br>
  <a href="link2.html" class="menu">Option 2</a>
</div>

HTML 加载得非常好，但可折叠菜单不再响应。

我查看并发现了几个与我类似的问题，但他们似乎没有有效的答案。如果有人能帮助我确定为什么会发生这种情况以及如何解决它，我将不胜感激。

Answer 1

更改 HTML 后，您需要(重新)附加事件处理程序。

function setupMenu() {
  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";
      }
    });
  }
}

function getMenu() {
  // wait 500ms to simulate an Ajax call...
  setTimeout(function () {
    document.getElementById('menu').innerHTML = `<button type="button" class="collapsible">Menu</button>
  <div class="content">
    <a href="link.html" class="menu">Option 1</a><br>
    <a href="link2.html" class="menu">Option 2</a>
  </div>`;
    setupMenu();   // <--- now
  }, 500);
}

getMenu();

.collapsible {
  background: none;
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
}
.content {
  margin-left: 18px;
  display: none;
  overflow: hidden;
}

<div id="menu">loading...</div>