Material Design Lite JS nie zastosowano do dynamicznie ładowanego pliku html

Question

Chcę ujednolicić układ nawigacji dla mojej witryny, dlatego utworzyłem osobny plik HTML, który zawiera kod nawigacji. Używam JS, aby załadować plik Dynamicznie

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

Problemem jest to, że material.min.js nie zostanie wykonany dla dynamicznie obciążonych elementów wewnątrz tej html i tracę jakąś kluczową funkcjonalność. Jak to naprawić?

Answer 1

Z oficjalnej docs:

Materiał Projekt Lite automatycznie zarejestruje i czynią wszystkie elementy oznaczone klasami MDL upon ładowania strony. Jednak w przypadku, gdy dynamicznie tworzysz elementy DOM, musisz zarejestrować nowe elementy za pomocą funkcji upgradeElement.

Załadowanie ponownie skryptu material.js nie spowoduje jego wykonania. Ale możesz zrobić kilka eksperymentów z upgradeElements, stosując go do całego załadowanego znacznika lub do poszczególnych elementów.

Answer 2

Sprawdź, czy załadowany jest componentHandler i spróbuj zaktualizować elementy po załadowaniu.

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

How the Component Handler works

W skrócie to podchodzi wszystkie zarejestrowane komponentów. Zapytania dla wszystkich węzłów z dostarczoną klasą CSS. Pętli nad nimi i tworzy ich instancje jeden po drugim. Po uaktualnieniu w węźle zaktualizowany obiekt zostanie dodany do zestawu danych. Ten obiekt zawiera rozdzieloną przecinkami listę składników składnika classAsString, aby zidentyfikować, które aktualizacje zostały wykonane.