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을 변경하면 잃어버린 애니메이션과 같은 Material Handler가 이러한 변경 사항에 적용되지 않습니다. html을 추가 한 후에는 자바 스크립트에서 componentHandler.upgradeDom();으로 전화해야합니다. 그런 다음 예상대로 작동해야합니다.

또한 잘못된 것 같습니다 : let id = $('stepcity').length + 1; 아마 클래스 또는 id 선택기 여야합니다.