动态创建的getmdl选择字段's的下拉窗口没有'单击项目时不要关闭

使用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 value="增强"）后，下拉窗口不会关闭。我尝试手动触发javascript，名为getmdlSelect.init（".getmdl-select"）；但没有运气。

javascript代码是在单击按钮时触发的。

我需要帮助来解决这个问题。谢谢