以前隱藏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之後什麼都不做。

感謝您的協助！

來源

2016-03-01 nickc

您使用的瀏覽器是？動態添加內容並調用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() {}; 
       } 
      }

來源

2016-03-02 04:14:55 ASmith

感謝這似乎做到了！ – nickc

以前隱藏div的材料設計精簡文本框

回答

相關問題