javascript - 使用 MDL 动态构建的输入无法正确呈现

Question

我有以下代码，

var loginForm = document.createElement('div');

loginForm.className = 'row';

loginForm.innerHTML = '<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo"><input class="mdl-textfield__input" type="text" id="login" /><label class="mdl-textfield__label" for="login">Username</label></div>';

document.getElementById('page-content').appendChild(loginForm);

问题是由于 javascript 函数已经运行，输入的样式不正确。

有谁需要调用什么 javascript 函数来完成这项工作？我试过MaterialTextfield.prototype.init()了，但没有任何改变。

Answer 1

您可以使用 MDL 的升级元素功能。由于您已经动态创建了 loginForm，因此您可以在范围内升级它

    componentHandler.upgradeElement(loginForm);
    //or, componentHandler.upgradeDom(loginForm);
    //however, I suggest using jQuery to upgrade multiple if you are adding more than one
    componentHandler.upgradeElements($('.mdl-textfield').get());

这将获取所有 mdl-textfield 对象并升级它们（如果之前没有升级）

Answer 2

我一直在挖掘源代码，发现componentHandler.upgradeDom(). 运行此功能时，所有动态元素都是固定的。