使用 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 value=“Enhancement”)后,下拉窗口未关闭。我尝试手动触发 JavaScript,称为 getmdlSelect.init(".getmdl-select");但没有运气。
单击按钮即可触发 JavaScript 代码。
我需要帮助来解决这个问题。谢谢。
最佳答案
您不需要通过此行升级所有元素 componentHandler.upgradeElement(element);
。除了最后一次通话之外,将其从所有地方删除。
写getmdlSelect.init(".getmdl-select"); componentHandler.upgradeDom();
就够了
在代码末尾。
这里是 jsfiddle 中的示例
关于javascript - 动态创建的 getmdl-select 字段的下拉窗口在单击项目时不会关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38549647/