使用MDL动态构建的输入不能正确呈现

dynamically built input using MDL does not render correctly

本文关键字：不能 输入 MDL 动态 构建 使用      更新时间：2023-09-26

我有以下代码，

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()，但没有任何改变。

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

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

相关文章：