Google Material 设计：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 菜单。谢谢！

这是我为测试制作的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();
});

Google Material 设计：mdl-menu 对动态负载没有反应

Google Material Design: mdl-menu does not react on dynamical load

javascript

jquery

material-design

google-material-icons