动态创建的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 item”后，下拉窗口没有关闭（li值=“增强”）。我试图手动触发javascript，名为getmdlSelect.init（“。getmdl-select”）;但没有运气。

点击按钮即触发javascript代码。

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

Answer 1

您不需要通过此行componentHandler.upgradeElement(element);升级所有元素。除了最后一次通话以外，从所有地方删除它。在代码的最后编写getmdlSelect.init(".getmdl-select"); componentHandler.upgradeDom();就足够了。

这是你在jsfiddle的例子

Answer 2

您始终可以在更新结束时添加componentHandler.upgradeAllRegistered()