通过innerHTML加载外部内容后，Collapsible组件无法正常工作

这个问题其实很常见——Materialize的组件在页面初始加载时会自动初始化，但动态添加到DOM中的元素不会被自动识别，所以需要我们手动触发初始化操作。

问题原因 #

当你通过innerHTML把HTML片段插入页面时，这些新的DOM元素并没有经过Materialize的初始化流程，而Collapsible组件需要依赖Materialize的JavaScript逻辑来实现折叠/展开功能，所以自然无法正常工作。

解决方案 #

在你完成HTML插入后，手动调用Materialize的Collapsible初始化方法即可。修改你的fetch回调代码如下：

var VeilingenZoeken = document.getElementById("VeilingenZoeken");
function getZoekResultaten() {
  const url = "backend/veilingen/VeilingenZoekresultaat.php?q=" + VeilingenZoeken.value;
  fetch(url)
    .then(response => response.text())
    .then(html => {
      const veilingItems = document.getElementById("veilingItems");
      veilingItems.innerHTML = html;
      // 手动初始化新添加的Collapsible组件
      const collapsibleElement = veilingItems.querySelector('.collapsible');
      if (collapsibleElement) {
        M.Collapsible.init(collapsibleElement);
      }
    });
}

说明 #

• M是Materialize暴露的全局对象，所有组件的初始化方法都挂载在这个对象下
• Collapsible.init()方法接受DOM元素（或元素列表）作为参数，会为这些元素绑定折叠/展开的事件逻辑
• 我们通过querySelector只针对刚插入的容器内的Collapsible元素进行初始化，这样更高效，避免影响页面上其他已初始化的组件

如果你的页面中会多次执行这个加载操作，也不用担心重复初始化的问题——因为每次innerHTML都会替换掉旧的内容，旧的Collapsible元素已经被移除，新的元素重新初始化即可。

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