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却没有。

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

如果稍后添加元素，则mdl-js-textfield无效

1 个答案: