Google Material Design：mdl菜单对动态载荷不起作用

Question

I'd like to insert a button and a mdl-menu as a tooltip in the html page.

Here is a sample Javascript code:

$(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>');
}); 

And the html is simple:

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

The problem is that the menu will not show up on button click as expected. However, if I hard code it in html, it works.

The question is how to make the mdl-menu pop up on button click. Thanks!

Here is a jsFiddle I made for test.

Answer 1

I found this is an issue in Github

The workaround I used to make it work is to use componentHandler.upgradeDom(); to update all the DOM binding and event listeners.

$(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();
});