1

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

サンプルの 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-menu をポップアップさせる方法です。ありがとう！

これは、テスト用に作成した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 に答える