MaterialDesign LiteでTextFieldを正しく追加する方法は？

Question

新しい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>'); 
 
    } 
 
});

ありがとう：

は、ここに私のjQueryのコードです！

Answer 1

DOMを変更すると、マテリアルハンドラ（見逃したアニメーションなど）はこれらの変更には適用されません。 htmlを追加した後、あなたのjavascriptでcomponentHandler.upgradeDom();に電話する必要があります。それは期待どおりに動作するはずです。

また、これは間違っているようです。let id = $('stepcity').length + 1; おそらくクラスまたはidセレクターである必要があります。