Material Design Lite JS non applicato al file html caricato dinamicamente

Question

Desidero unificare il layout di navigazione per il mio sito Web, quindi ho creato un file html separato che contiene il codice per la navigazione. Io uso un JS per caricare il file in modo dinamico:

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

Il problema è che i material.min.js non venga eseguito per i componenti caricati dinamicamente all'interno di questo html e perdo alcune funzionalità cruciali. Come lo aggiusto?

Answer 1

Dalla ufficiale docs:

Material Design Lite sarà registrare e rendere tutti gli elementi contrassegnati con classi MDL al caricamento della pagina automaticamente. Tuttavia, nel caso in cui si stiano creando elementi DOM dinamicamente, è necessario registrare nuovi elementi utilizzando la funzione upgradeElement.

Quindi caricare lo script material.js di nuovo non verrà eseguito. Ma puoi fare alcuni esperimenti con upgradeElements applicandolo all'intero markup caricato o ad elementi particolari.

Answer 2

Controllare se il componentHandler è caricato e provare ad aggiornare gli elementi dopo il caricamento.

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

How the Component Handler works

In breve questo va oltre tutti i componenti registrati. Query per tutti i nodi con la classe CSS fornita. Cicli su quelli e li istanzia uno per uno. Quando l'aggiornamento viene eseguito su un nodo, l'oggetto aggiornato viene aggiunto al set di dati. Questo oggetto contiene un elenco separato da virgole delle proprietà del componente classAsString per identificare quali aggiornamenti sono stati eseguiti.