материальный дизайн lite текстовое поле на ранее скрытом div

Question

Итак, я обновляю свой сайт, чтобы использовать MDL google и время зависания, когда я знаю, что не должен быть.

У меня одинаковые 2 divs, оба содержат текстовое поле с меткой MDL. Единственное различие заключается в том, что div B скрыт (используя класс под названием «hide», с css display: none).

<div id='a'> 
    <div class="mdl-textfield mdl-js-textfield"> 
     <input class="mdl-textfield__input" type="text" id="sample1"> 
     <label class="mdl-textfield__label" for="sample1">Text...</label> 
    </div> 
    </div> 

    <div id='b' class='hide'> 
    <div class="mdl-textfield mdl-js-textfield"> 
     <input class="mdl-textfield__input" type="text" id="sample1"> 
     <label class="mdl-textfield__label" for="sample1">Text...</label> 
    </div> 
    </div> 

При загрузке страницы текстовое поле в div A имеет стиль MDL, как и ожидалось. Когда я показываю div B через $ ('# b'). Show() в текстовом поле нет показать стиль MDL.

Как получить текстовое поле в div B, чтобы применить к нему форматирование MDL?

Вызов компонентаHandler.upgradeDom(); после показа Div B ничего не делает.

Благодарим за помощь!

Answer 1

У меня был следующий скрипт, когда я делаю изменения в пользовательском интерфейсе. Сам скрипт извлекается из MDL material.js, и до сих пор кажется, что это трюк. Попробуйте вызвать этот скрипт после того, как ваш код отобразит пользовательский интерфейс или после того, как будет запущено событие «change». Удачи!

function registerMaterialLite() 
      { 
       'use strict'; 
       if ('classList' in document.createElement('div') && 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach) 
       { 
        document.documentElement.classList.add('mdl-js'); 
        componentHandler.upgradeAllRegistered(); 
       } 
       else 
       { 
        componentHandler.upgradeElement = function() {}; 
        componentHandler.register = function() {}; 
       } 
      }