通过 javascript 添加 mdl 文本字段组件时的奇怪行为

Question

通过javascript创建的文本框不能做浮动文本，也没有is-upgradedclass。如何正确实施？

示例代码：

var div_name = document.createElement("div");
div_name.setAttribute("class", "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet");
console.log("Masuk");
componentHandler.upgradeElement(div_name);
console.log("Masuk1");
var p_element = document.getElementsByClassName("container")[0].appendChild(div_name);

var l_name = document.createElement("label");
var t = document.createTextNode("Name:");
l_name.setAttribute("class", "mdl-textfield__label");
l_name.setAttribute("for", "name");
l_name.appendChild(t);
componentHandler.upgradeElement(l_name);
p_element.appendChild(l_name);

var i_name = document.createElement("input");
var t = document.createTextNode("");
i_name.setAttribute("id", "name");
i_name.setAttribute("class", "mdl-textfield__input");
i_name.setAttribute("name", "name");
i_name.setAttribute("type", "text");
i_name.setAttribute("autocomplete", "off");
i_name.appendChild(t);
componentHandler.upgradeElement(i_name);
p_element.appendChild(i_name);

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_blue-blue.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<div class="container">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
    <label for="email" class="mdl-textfield__label">Email:</label>
    <input id="email" name="email" autocomplete="off" class="mdl-textfield__input" type="text">
  </div>
</div>

谢谢。

Answer 1

在完整结构准备就绪并附加到文档之前，您不需要升级组件。

固定和注释版本是：

var div_name = document.createElement("div");
div_name.setAttribute("class", "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet");
console.log("Masuk");
// Do not upgrade before the complete component is ready
console.log("Masuk1");
var p_element = document.getElementsByClassName("container")[0].appendChild(div_name);

var l_name = document.createElement("label");
var t = document.createTextNode("Name:");
l_name.setAttribute("class", "mdl-textfield__label");
l_name.setAttribute("for", "name");
l_name.appendChild(t);
// Do not upgrade before the complete component is ready
p_element.appendChild(l_name);

var i_name = document.createElement("input");
var t = document.createTextNode("");
i_name.setAttribute("id", "name");
i_name.setAttribute("class", "mdl-textfield__input");
i_name.setAttribute("name", "name");
i_name.setAttribute("type", "text");
i_name.setAttribute("autocomplete", "off");
i_name.appendChild(t);
p_element.appendChild(i_name);

// Update the item with the `mdl-js` identifier *after* it is attached to the DOM.
componentHandler.upgradeElement(div_name);

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_blue-blue.min.css"><script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<div class="container">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
    <label for="email" class="mdl-textfield__label">Email:</label>
    <input id="email" name="email" autocomplete="off" class="mdl-textfield__input" type="text">
  </div>
</div>

通过 javascript 添加 mdl 文本字段组件时的奇怪行为

Strange behavior when add mdl textfield component via javascript

material-design-lite