biểu tượng bánh hamburger không hiển thị ngay cả khi tôi gọi 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> 

Theo http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/ nó sẽ hoạt động miễn là tôi gọi componentHandler.upgradeDom() sau khi tôi tự động tải html. Chỉ cần chắc chắn rằng tôi đang gọi upgradeDom chính xác tôi đã thêm nút để xem hiệu ứng gợn được thêm vào chưa. Và nút được cập nhật nhưng biểu tượng bánh hamburger không xuất hiện.

Nếu tôi nội tuyến html biểu tượng bánh hamburger xuất hiện.

Answer 1

Vì bạn đang tải động html, bạn nên chạy phần sau bên trong hàm init của mình sau khi tải DOM. Chú ý rằng setInterval chức năng để đảm bảo DOM có đủ thời gian để tải trước khi thực hiện phương pháp componentHandler

jQuery

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

DOM API

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