Google Material Design：mdl-menu不會對動態負載做出反應

Question

我想在html頁面中插入一個按鈕和一個mdl菜單作爲工具提示。

下面是一個簡單的Javascript代碼：

$(function(){ 
    $("#dynamic").html('<button id="share-post-2" class="mdl-button mdl-button--icon mdl-button--colored">\ 
     <i class="material-icons">share</i></button>\ 
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu" for="share-post-2">\ 
     <li class="mdl-menu__item">Facebook</li>\ 
     <li class="mdl-menu__item">Twitter</li>\ 
     <li class="mdl-menu__item">Pinterest</li>\ 
    </ul>'); 
}); 

和HTML很簡單：

<div id='dynamic'></div> 

的問題是，菜單將不會在按一下按鈕顯示爲預期。但是，如果我用html進行硬編碼，它就可以工作。

問題是如何使按鈕點擊彈出MDDL菜單。謝謝！

這是我做的測試jsFiddle。

Answer 1

，我發現這是Github

我用來做它的工作解決方法的問題是使用componentHandler.upgradeDom();更新所有的DOM綁定和事件偵聽器。

$(function(){ 
    $("#dynamic").html('<button id="share-post-2" class="mdl-button mdl-button--icon mdl-button--colored">\ 
     <i class="material-icons">share</i></button>\ 
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu" for="share-post-2">\ 
     <li class="mdl-menu__item">Facebook</li>\ 
     <li class="mdl-menu__item">Twitter</li>\ 
     <li class="mdl-menu__item">Pinterest</li>\ 
    </ul>'); 
    // Expand all new MDL elements 
    componentHandler.upgradeDom(); 
});