使用 JS 从另一个 HTML 文件添加的 HTML 正确显示，但 JS 功能不起作用答案

【问题标题】：HTML added from another HTML file using JS displays correctly, but JS functions do not work使用 JS 从另一个 HTML 文件添加的 HTML 正确显示，但 JS 功能不起作用
【发布时间】：2021-05-03 11:29:35
【问题描述】：

我想从另一个 html 文件中获取我的 html 页面的元素。所以，这样的小部件一次显示在许多页面上。

我能够编写 JS 代码，以便从另一个文件中获取元素的内容。代码如下：

//* Accordion - replace */
var fn = (event) => {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", '/widgets/accordion.html', true);
  xhr.onload = function (e) {  
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText)
        document.getElementById("accordion").innerHTML = xhr.responseText;
      } 
      else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.send(null); }
document.addEventListener('DOMContentLoaded', fn, false);
document.addEventListener

项目（手风琴）正确显示，如下代码所示：

https://codepen.io/jakub-czeszejko-sochacki/pen/rNWNwrN

但不幸的是，它不能正常工作，就好像没有为这个元素读取 JS 代码一样。结果，当您单击手风琴按钮时，手风琴不会打开。

这甚至可以与 JS 一起使用吗？

【问题讨论】：

您的浏览器控制台是否显示任何错误？
不，看不到任何错误。

标签： javascript html dom xmlhttprequest dropdown

【解决方案1】：

问题解决了。

原来 JS 手风琴启动发生在它的 html 被加载之前：

document.getElementById ("accordion"). innerHTML = xhr.responseText;

把初始化代码（手风琴开场代码）放在函数中，在上面这行代码之后调用这个函数就足够了。

【讨论】：