Google材料设计:MDL-Menu不会在动态负载下做出反应

Question

我想在HTML页面中插入一个按钮和mdl-menu作为工具提示。

这是示例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进行硬编码，则可以。

问题是如何使MDL-menu在按钮上弹出。谢谢！

这是我进行测试的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();
});