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

Question

我想从另一个 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 一起使用吗？

Answer 1

问题已解决。

事实证明，JS 手风琴启动发生在其 html 加载以下行之前：

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

将初始化代码（手风琴打开代码）放在函数中，在上面这行代码之后调用这个函数就可以了。

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

HTML added from another HTML file using JS displays correctly, but JS functions do not work

html

javascript

dom

xmlhttprequest

dropdown