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

问题描述：

所以，我正在升级我的网站使用谷歌MDL，并有一段时间，当我知道我不应该。以前隐藏div的材料设计精简文本框

我有相同的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格式？

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

感谢您的协助！

您使用的浏览器是？动态添加内容并调用upgradeDom（）时Safari浏览器遇到问题，而Chrome正常工作。 – acuth

铬。从@ASmith下面的黑客似乎在我的情况下工作。 – nickc

答

当我对UI进行运行时更改时，我一直在运行以下脚本。脚本本身是从MDL material.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() {}; 
       } 
      }

感谢这似乎做到了！ – nickc

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

相关推荐