Material Design Lite JS不适用于动态加载的html文件

Question

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

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

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

Answer 1

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

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

组件处理程序的工作原理

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

Answer 2

来自官方文档：

Material Design Lite 将在页面加载时自动注册并渲染所有标记有 MDL 类的元素。然而，在动态创建 DOM 元素的情况下，您需要使用该upgradeElement函数注册新元素。

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