如果稍后添加元素，mdl-js-textfield 不工作

Question

使用 MDL (material-design-lite) 时，如果我在页面已完全加载后使用 JS 创建文本字段，我的文本字段将无法正常工作。

例如：

$('.container').append('<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-layout--padding-bottom-0">' +
        '<input class="mdl-textfield__input" type="text" id="#ssid" name="ssid" required>' + 
        '<label class="mdl-textfield__label" for="ssid">SSID</label>' + 
    '</div>');

将文本字段代码附加到容器后，一切看起来都很好。但是点击文本框不会浮动标签，文本框周围会显示正常的发光。

希望你明白我的意思。

Answer 1

这里有两个问题。

首先，当您在代码中添加元素时 - 您需要通过调用 upgradeDom

让 MDL 库更新您的 Dom

componentHandler.upgradeDom(gridHolder);

如果这不起作用，我发现使用 javascript 生成动态元素确实更新了 DOM 并且这一切似乎都有效，而使用 JQuery 却没有。

请参阅我遇到类似问题的地方，它包含 JavaScript 生成元素的代码。

如果稍后添加元素，mdl-js-textfield 不工作

mdl-js-textfield not working if element added later

jquery

dom

material-design-lite