Material Design Lite動的にロードされたhtmlファイルにJSが適用されていません

Question

私は自分のウェブサイトのナビゲーションレイアウトを統一したいので、ナビゲーションのコードを保持するHTMLファイルを作成しました。私は、動的にファイルをロードするためにJSを使用します。

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

問題はmaterial.min.jsこのHTML内の動的にロードされたコンポーネントに対して実行されないと、私はいくつかの重要な機能が失われていることです。どうすれば修正できますか？

Answer 1

公式docsから：

材料設計Liteは自動的にページのロード時にMDLクラスでマークされたすべての要素を登録してレンダリングします。しかし、DOM要素を動的に作成する場合は、upgradeElement関数を使用して新しい要素を登録する必要があります。

したがって、material.jsスクリプトを再度読み込んでも実行されません。しかし、読み込んだマークアップ全体または特定の要素に適用することで、upgradeElementsでいくつかの実験を行うことができます。

Answer 2

componentHandlerがロードされていることを確認し、ロード後に要素をアップグレードしてください。要するに

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

How the Component Handler works

これは、登録されたすべてのコンポーネントの上に行きます。指定されたCSSクラスを持つすべてのノードを照会します。それらをループし、それらを1つずつインスタンス化します。アップグレードがノードで実行されると、アップグレードされたオブジェクトがデータセットに追加されます。このオブジェクトには、コンポーネントのclassAsStringのコンマで区切られたリストが含まれており、どのアップグレードが行われたかを識別します。