hamburger simgesi, 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> 

http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/'a göre, html'yi dinamik olarak yükledikten sonra componentHandler.upgradeDom()'u aradığım sürece çalışmalıdır. Sadece upgradeDom'u çağırdığımdan emin olmak için, dalga efektinin eklenip eklenmediğini görmek için düğmeye ekledim. Ve düğme güncellendi ancak hamburger simgesi görünmüyor.

html'yi satır içi çizerseniz, hamburger simgesi görüntülenir.

Answer 1

html'yi dinamik olarak yüklediğinizden, DOM yüklendikten sonra init işlevinizin içinde aşağıdakileri çalıştırmanız gerekir. DOM sağlamak için setInterval fonksiyon componentHandler yöntemi

jQuery çalıştırmadan önce yüklenmesi için yeterli zaman sahip olduğuna dikkat edin

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

DOM API bunun gibi belki bir yanlış css stil varsa

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