Dynamisch erzeugtes getmdl-Select-Feld, das Drop-Down-Fenster schließt nicht beim Klicken auf ein Element

Question

Code für die Erstellung von Eingabetextelement mit getmdl-Select-Klasse dynamisch. Code Snippet

<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') 
}) 

Problem: Die Drop-Down-Fenster lässt sich nicht schließen, nachdem ich den "li Punkt" (li value = "Enhancement") wählen. Ich habe versucht, das Javascript, getmdlSelect.init (". Getmdl-select") manuell auszulösen; aber kein Glück.

Der JavaScript-Code wird auf Knopfdruck ausgelöst.

Ich brauche Hilfe, um dieses Problem zu beheben. Vielen Dank.

Answer 1

Sie müssen nicht alle Elemente um diese Zeile componentHandler.upgradeElement(element); aktualisieren. Entfernt es von überall außer dem letzten Anruf. Es ist genug zu schreiben getmdlSelect.init(".getmdl-select"); componentHandler.upgradeDom(); am Ende Ihres Codes.

Hier Ihr Beispiel in jsfiddle