Question

所以我升级我的网站以使用谷歌MDL，并且在我知道我不应该这样做的时候停下来。

我有两个相同的div，都包含一个MDL标记的文本框。唯一的区别是div B是隐藏的（使用名为＆＃39; hide＆＃39;，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样式。当我通过$（＆＃39;＃b＆＃39;）show（）显示div B时，文本框不显示MDL样式。

如何获取div B中的文本框以应用MDL格式？

调用componentHandler.upgradeDom（）;显示div B之后什么也没做。

感谢您的协助！

Answer 1

当我对UI进行运行时更改时，我一直在运行以下脚本。脚本本身是从MDL material.js中提取的，到目前为止它似乎可以解决问题。在您的代码呈现用户界面或“更改”之后尝试调用此脚本。事件被解雇了。祝你好运！

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

以前隐藏的div

1 个答案: