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

Question

我想统一我网站的导航布局，所以我创建了一个单独的 html 文件来保存导航代码。我使用 JS 动态加载文件:

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

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

Answer 1

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

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

How the Component Handler works

In short this goes over all registered components. Queries for all nodes with the provided CSS class. Loops over those and instantiates them one-by-one. When the upgrade is done on a node, the upgraded object is added to the dataset. This object contains a comma separated list of component classAsString properties to identify which upgrades have been done.