如果以後添加元素，mdl-js-textfield不起作用

Question

當使用MDL（material-design-lite）時，我的文本框不起作用，如果我在頁面已經完全加載後使用JS創建它們。

因此，例如：文本字段代碼已被附加到容器

$('.container').append('<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-layout--padding-bottom-0">' + 
     '<input class="mdl-textfield__input" type="text" id="#ssid" name="ssid" required>' + 
     '<label class="mdl-textfield__label" for="ssid">SSID</label>' + 
    '</div>'); 

後，一切都看起來不錯。但是單擊文本框不會浮動標籤，文本框周圍的正常輝光將顯示。

希望你明白我要去的地方。

Answer 1

這裏有兩個問題。

首先，當您添加代碼元素 - 你需要得到MDL庫通過調用到upgradeDom

componentHandler.upgradeDom(gridHolder); 

更新您的DOM的。如果不工作，我已經發現，使用JavaScript來生成動態元素不會更新DOM，並且它似乎都可以工作，而使用JQuery的地方則沒有。

請參閱Google MDL - Creating card in jquery shows only text - no background or border我遇到過類似的問題，它包含用於生成元素的JavaScript代碼。