如何使用 MaterialDesign Lite 正确附加 TextField？答案

【问题标题】：how to append a TextField properly with MaterialDesign Lite?如何使用 MaterialDesign Lite 正确附加 TextField？
【发布时间】：2017-02-10 10:40:45
【问题描述】：

我尝试使用 jQuery 附加一个新的 text with floating label，但我附加的文本字段没有动画。

我怎样才能让它变成动画？

这是我的 jQuery 代码：

$('body').on('keypress', '.stepcity', function(e){
    let keyCode = e.keyCode || e.which;

    if (keyCode == 9 || keyCode == 13)
    {
        e.preventDefault();
        let id = $('stepcity').length + 1;
        $('#StepCities').append('<div class="mdl-grid mdl-cell--7-col"><div class="mdl-cell--2-col CreateGroupIcons"><i class="fa fa-dot-circle-o"></i></div><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--10-col"><input class="mdl-textfield__input hightlyVisible stepcity" type="text" id="StepCity'+id+'"><label class="mdl-textfield__label" for="StepCity'+id+'">Step City</label></div></div>');
    }
});

谢谢！

【问题讨论】：

标签： javascript jquery material-design material-design-lite

【解决方案1】：

如果您对 DOM 进行更改，Material-Handlers（如您错过的动画）将不适用于这些更改。附加 html 后，您必须在 javascript 中调用 componentHandler.upgradeDom();。那么它的行为应该和预期的一样。

这似乎是错误的：let id = $('stepcity').length + 1; 它可能应该是一个类或一个 id-selector。

【讨论】：