Динамически добавлять элементы формы в MDL

Question

Я хочу добавить элемент ввода текста в форму динамически. Я использую mdl для рамки css3. Я Аддин новой elemnt к этой форме:

<form> 
    <div id="enter-participant-details-div"> 
    <div id="1" class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield mdl-cell--6-col"> 
     <input class="mdl-textfield__input" type="text" name="participant[]" required /> 
     <label class="mdl-textfield__label">Participant 1</label> 
    </div> 
    </div> 
</form> 

добавить новый элемент текста с помощью:

var x = '<div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield mdl-cell--6-col" style="margin:2px;" >' 
     +' <input class="mdl-textfield__input" type="text" name="participant[]" required />' 
     +' <label class="mdl-textfield__label">Participant 2</label>' 
    +'</div>'; 
$('#enter-participant-details-div').append(x); 

Когда я пытаюсь сделать это, CSS свойства нового ввода текста не является меняется.

проверка на =>https://jsfiddle.net/mr4pswaq/2/

, что я должен сделать, чтобы сделать его похожим на первый элемент ввода текста?

Answer 1

Для динамически создаваемых элементов вам необходимо вручную обновить его.

Просто добавьте следующую строку:

componentHandler.upgradeDom();