Material Design Lite JS未应用于动态加载的html文件

Material Design Lite JS not applied to dynamically loaded html file

本文关键字：加载 html 文件 动态 应用于 Design Lite JS Material      更新时间：2023-09-26

我想统一我的网站的导航布局，所以我创建了一个单独的html文件，其中包含导航代码。我使用JS动态加载文件：

$("#navigation").load("/navigation/navigation.html", function() {
   $.getScript('/material.min.js');
});

问题是material.min.js没有为这个html中动态加载的组件执行，我失去了一些关键的功能。我该怎么解决？

检查componentHandler是否已加载，并尝试在加载后升级元素。

if(!(typeof(componentHandler) == 'undefined')){
  componentHandler.upgradeAllRegistered();
}

组件处理程序如何工作

简而言之，这会覆盖所有注册的组件。使用所提供的CSS类查询所有节点。循环这些并逐一实例化它们。在节点上完成升级后，升级后的对象将添加到数据集中。此对象包含以逗号分隔的组件classAsString属性列表，用于标识已完成的升级。

来自官方文档：

Material Design Lite将在页面加载时自动注册并呈现所有标有MDL类的元素。但是，在动态创建DOM元素的情况下，需要使用upgradeElement函数注册新元素。

因此，再次加载material.js脚本不会执行它。但是，您可以通过将它应用于整个加载的标记或特定元素来对upgradeElements进行一些实验。

相关文章：