1

我想在 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 对其进行硬编码，它就可以工作。

问题是如何使 mdl 菜单在按钮单击时弹出。谢谢！

这是我为测试而制作的jsFiddle 。

4

1 回答 1

2

我发现这是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();
});
于 2016-12-05T08:05:26.713 回答