material 在之前隐藏的 div 上设计精简版文本框

Question

所以我正在升级我的网站以使用 google MDL 并且在我知道我不应该的时候有一段时间了。

我有 2 个相同的 div，都包含一个 MDL 标记的文本框。唯一的区别是 div B 是隐藏的（使用 class 称为 '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 样式。当我通过 $('#b').show() 显示 div B 时，文本框 not 显示 MDL 样式。

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

调用componentHandler.upgradeDom()； div B 显示后什么都不做。

感谢您的帮助！

Answer 1

当我对 UI 进行运行时更改时，我一直在运行以下脚本。脚本本身是从 MDL material.js 中提取的，到目前为止它似乎可以解决问题。尝试在您的代码呈现 UI 或触发 '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() {};
                }
            }

material 在之前隐藏的 div 上设计精简版文本框

material design lite textbox on previously hidden div

material-design-lite