ikona hamburgera nie wyświetla się, nawet jeśli zadzwonię do componentHandler.upgradeDom();

Question

<header class="mdl-layout__header"> 
    <div class="mdl-layout__header-row"> 

     <!-- Navigation --> 
     <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link is-active" href="/">link</a> 
      <a class="mdl-navigation__link is-active" href="/">link</a> 
     </nav> 
    </div> 
</header> 
<div class="mdl-layout__drawer"> 
    <nav class="mdl-navigation"> 
     <a class="mdl-navigation__link is-active" href="/">link</a> 
     <a class="mdl-navigation__link is-active" href="/">link</a> 
    </nav> 
</div> 

<!-- Colored FAB button with ripple --> 
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> 
    <i class="material-icons">add</i> 
</button> 

Zgodnie z http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/ powinien działać tak długo, jak nazywam componentHandler.upgradeDom() po dynamicznym załadowaniu html. Aby upewnić się, że dzwonię do aktualizacji upgradeDom, dodałem przycisk, aby sprawdzić, czy dodano efekt marszczenia. Przycisk jest aktualizowany, ale ikona hamburgera nie pojawia się.

Jeśli dodaję html, pojawi się ikona hamburgera.

Answer 1

Ponieważ ładujesz dynamicznie html, po uruchomieniu DOM uruchom następującą funkcję wewnątrz init. Zauważ, że funkcja setInterval celu zapewnienia DOM ma wystarczająco dużo czasu, aby załadować przed wykonaniem metody componentHandler

jQuery

$(document).ready(function() { 
     setInterval(function() { 
      componentHandler.upgradeAllRegisteredElements(); 
     }, 1000); 
}); 

DOM API

document.addEventListener('DOMContentLoaded', function() { 
     setInterval(function() { 
      componentHandler.upgradeAllRegisteredElements(); 
     }, 1000); 
});