Googleマテリアルデザイン：動的負荷でmdl-menuが反応しない

Question

htmlページにツールチップとしてボタンとmdl-menuを挿入したいと思います。

$(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は簡単です：：ここで

はサンプルJavaScriptコードで

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

問題が予想されるようなメニューは、ボタンのクリックで表示されませんということです。しかし、私はhtmlでそれをハードコードして、それは動作します。

質問は、ボタンクリックでMDLメニューをポップアップする方法です。ありがとう！

私はテスト用にjsFiddleです。

Answer 1

私は、これは、私はそれを動作させるために使用される回避策は、すべてのDOMバインディングやイベントリスナーを更新するために、componentHandler.upgradeDom();を使用することですGithub

で問題である見つけました。

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