如果稍后添加元素，mdl-js-textfield 不起作用答案

【问题标题】：mdl-js-textfield not working if element added later如果稍后添加元素，mdl-js-textfield 不起作用
【发布时间】：2016-02-26 13:59:36
【问题描述】：

使用 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>');

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

希望你明白我的意思。

【问题讨论】：

标签： jquery dom material-design-lite

【解决方案1】：

这里有两个问题。

首先，当您在代码中添加元素时 - 您需要通过调用 upgradeDom 来获取 MDL 库来更新您的 Dom

componentHandler.upgradeDom(gridHolder);

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

请参阅Google MDL - Creating card in jquery shows only text - no background or border 我遇到了类似的问题，它包含用于生成元素的 JavaScript 代码。

【讨论】：

谢谢。这对我帮助很大。