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

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.

score 2 · Accepted Answer · answered Dec 05 '16 at 08:05

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

It works, I had the same problem and it solved it, but I can't understand what was the problem to avoid making the same mistake again in the future. — Camilo Andrés Ospina, Sep 09 '18 at 22:18

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

1 Answers1