使用 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

我一直在挖掘源代码并找到了componentHandler.upgradeDom()。当运行这个函数所有的动态元素都是固定的。

Answer 2

您可以使用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 对象并升级它们（如果之前没有升级）

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

dynamically built input using MDL does not render correctly

javascript

material-design

material-design-lite