動的に作成されたgetmdl-selectフィールドのドロップダウンウィンドウは、項目のクリックで閉じることはありません。

Question

動的にgetmdl-selectクラスを使用して入力テキスト要素を作成するためのコード。 コードスニペット

<div id="project-details"> 
<div id='project-type' class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select"> 
    <input id="mainText" class="mdl-textfield__input" type="text" readonly tabIndex="-1"> 
    <label for="mainText"> 
     <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i> 
    </label> 
    <label for="mainText" class="mdl-textfield__label">Project Type</label> 
    <ul for="mainText" class="mdl-menu mdl-menu--bottom-left mdl-js-menu"> 
     <li class="mdl-menu__item">Enhancements</li> 
    </ul> 
</div> 
</div> 

Div with id "project-details" is created along with the form(static). 

Below code dynamically creates the Div with id "project-type" and its child elements. 

JavaScript Code 
--------------- 

var project_type = document.createElement('div'); 
project_type.id="project-type"; 
project_type.className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select"; 
componentHandler.upgradeElement(project_type); 
document.getElementById('project-details').appendChild(project_type); 

//Input element 
var mainText = document.createElement('input'); 
mainText.class="mdl-textfield__input" 
mainText.type="text"; 
mainText.className="mdl-textfield__input"; 
mainText.id="mainText"; 
mainText.tabIndex="-1"; 
mainText.readOnly=true; 
componentHandler.upgradeElement(mainText); 
document.getElementById('project-type').appendChild(mainText); 

//Adding Label and i tag 
var lbl_project_type = document.createElement('label'); 
lbl_project_type.setAttribute("for","mainText"); 
lbl_project_type.id="lbl-mainText"; 
componentHandler.upgradeElement(lbl_project_type); 
document.getElementById('project-type').appendChild(lbl_project_type); 

var i_lbl_project_type= document.createElement('i'); 
i_lbl_project_type.className="mdl-icon-toggle__label material-icons"; 
i_lbl_project_type.innerHTML = "keyboard_arrow_down"; 
componentHandler.upgradeElement(i_lbl_project_type); 
document.getElementById('lbl-mainText').appendChild(i_lbl_project_type);  

//Adding label for ul 
var lbl_ul_project_type = document.createElement('label'); 
lbl_ul_project_type.setAttribute("for","mainText"); 
lbl_ul_project_type.id="lbl-ul"; 
lbl_ul_project_type.className="mdl-textfield__label"; 
lbl_ul_project_type.innerHTML="Project Type"; 
document.getElementById('project-type').appendChild(lbl_ul_project_type); 
componentHandler.upgradeElement(lbl_ul_project_type); 

//Add ul 
var ul_project_type = document.createElement('ul'); 
ul_project_type.setAttribute("id","ul-project-type"); 
ul_project_type.setAttribute("for","mainText"); 
ul_project_type.className="mdl-menu mdl-menu--bottom-left mdl-js-menu"; 
document.getElementById('project-type').appendChild(ul_project_type); 
componentHandler.upgradeElement(ul_project_type); 


//Add li 
var li = document.createElement('li'); 
li.id = "li-ul-project-type"; 
li.className ="mdl-menu__item"; 
li.innerHTML = "Enhancement"; 
li.setAttribute("tabindex", "-1"); 
document.getElementById('ul-project-type').appendChild(li); 
componentHandler.upgradeElement(li); 

componentHandler.upgradeElement(project_type); 

//Trigger init function of getmdlSelect 
getmdlSelect.init(".getmdl-select"); 
componentHandler.upgradeDom(); 

//trigger the javascript to bind the event 
$.ajax ({ 
    url: "http://localhost:8000/js/getmdl-select.min.js", 
    dataType: "script", 
    success: console.log('success') 
}) 

問題：私は「LI項目」を選択した後、ドロップダウンウィンドウが閉じない（LI値=「拡張」）。私は手動でgetmdlSelect.init（ "。getmdl-select"）と呼ばれるjavascriptをトリガーしようとしました。運がない。

ボタンをクリックすると、JavaScriptコードがトリガーされます。

私はこの問題を解決するために援助が必要です。ありがとう。

Answer 1

この行ですべての要素をアップグレードする必要はありませんcomponentHandler.upgradeElement(element);。最後の呼び出しを除くどこからでも削除されました。 コードの最後にgetmdlSelect.init(".getmdl-select"); componentHandler.upgradeDom(); と書いてください。 jsfiddle