comment ajouter correctement un TextField avec MaterialDesign Lite?

Question

J'essaie d'ajouter un nouveau text with floating label avec jQuery, mais mon champ de texte ajouté n'est pas animé.

Comment puis-je le faire animer?

Voici mon code 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>'); 
 
    } 
 
});

Merci!

Answer 1

Si vous apportez des modifications au DOM, les Material-Handlers (comme les animations qui vous manquent) ne s'appliqueront pas à ces modifications. Vous devez appeler componentHandler.upgradeDom(); dans votre javascript, après avoir ajouté le code html. Ensuite, il devrait se comporter comme prévu.

Également cela semble faux: let id = $('stepcity').length + 1; Il devrait probablement être une classe ou un id-sélecteur.