以前隐藏的 div 上的材料设计精简版文本框

Question

所以我正在升级我的网站以使用谷歌MDL，并在我知道我不应该的时候掌握时间。

我有相同的 2 个div，都包含一个 MDL 标记的文本框。唯一的区别是div B是隐藏的（使用一个名为"hide"的类，带有display：none的css）。

   <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 样式。当我通过 $（'#b'）.show（） 显示div B 时，文本框不显示 MDL 样式。

如何让div B 中的文本框应用MDL格式？

在显示div B 之后调用 componentHandler.upgradeDom（）; 不执行任何操作。

感谢您的帮助！

Answer 1

当我对 UI 进行运行时更改时，我一直在运行以下脚本。脚本本身是从 MDL 材料中提取的.js到目前为止，它似乎可以解决问题。 尝试在代码呈现 UI 或触发"更改"事件后调用此脚本。 祝你好运！

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() {};
                }
            }