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