हैमबर्गर आइकन नहीं दिख रहा है, भले ही मैं 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/ के अनुसार इसे तब तक काम करना चाहिए जब तक मैं componentHandler.upgradeDom() पर कॉल करता हूं जब मैं गतिशील रूप से HTML लोड करता हूं। बस यह सुनिश्चित करने के लिए कि मैं अपग्रेड को कॉल कर रहा हूं, सही है मैंने यह देखने के लिए बटन जोड़ा कि क्या लहर प्रभाव जोड़ा गया है या नहीं। और बटन अपडेट किया गया है लेकिन हैमबर्गर आइकन दिखाई नहीं दे रहा है।

अगर मैं एचटीएमएल हैमबर्गर आइकन प्रकट होता है इनलाइन।

Answer 1

जब से तुम प्रभावी ढंग से HTML लोड कर रहे हैं, आप के बाद DOM लोड है अपने init समारोह के अंदर निम्नलिखित चलाना चाहिए। सूचना DOM सुनिश्चित करने के लिए setInterval समारोह componentHandler विधि

jQuery निष्पादित करने से पहले लोड करने के लिए पर्याप्त समय है कि

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

डोम एपीआई

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