谷歌MDL - jQuery中創建卡只顯示文本 - 沒有背景或邊框

Question

我有下面的代碼在運行中創建一個MDL卡

     var resultsHolder = $('#resultsHolder'); 
         var gridHolder  = $('<div>',{ 'class' : 'mdl-grid' }); 
         var card   = $('<div>',{ 'class' : 'mdl-card.mdl-shadow--2dp data-display' }); 
         var title   = $('<div>',{'class' : 'mdl-card__title'}); 
         var h4    = $('<h4>'); 
         var supportingText = $('<div>',{'class' : 'mdl-card__supporting-text'}); 
         var supportingPara = $('<div>',{'class' : 'projectDesc'}); 

         h4.append($('#projectName').val()); 
         title.append(h4); 

         supportingPara.append($('#projectDesc').val()); 
         supportingText.append(supportingPara); 

         card.css('width','100%'); 
         card.append(title); 
         card.append(supportingText); 

         gridHolder.append(card); 
         resultsHolder.prepend(gridHolder); 

         componentHandler.upgradeElement(resultsHolder); 

而出現的新卡的內容。沒有邊框或背景出現。

我看到下面的鏈接

How can I update/refresh Google MDL elements that I add to my page dynamically?

，但使用下列任何一項;

• componentHandler.upgradeDom（）;
• componentHandler.upgradeElement（）;

傳遞類卡持有人 - $（ '＃resultsHolder'）

沒有人可以有所作爲。

那麼如何讓我的滿卡顯示。

Answer 1

最終不是使用JQuery管理它，而是使用原始JavaScript創建元素。因此，創建卡片，標題，支持文本和操作的修訂版本如下：

var resultsHolder = document.getElementById('resultsHolder'); 
var gridHolder  = document.createElement('div'); 
var card   = document.createElement('div'); 
var title   = document.createElement('div'); 
var h4    = document.createElement('h4'); 
var supportingText = document.createElement('div'); 
var supportingPara = document.createElement('p'); 
var cardActions  = document.createElement('div'); 
var detailButton = document.createElement('button'); 

try { 
    // assign classes 
    gridHolder.className  = 'mdl-grid'; 
    card.className    = "mdl-card mdl-shadow--2dp data-display"; 
    title.className    = 'mdl-card__title'; 
    supportingText.className = 'mdl-card__supporting-text'; 
    supportingPara.className = 'projectDesc'; 
    cardActions.className  = 'mdl-card__actions mdl-card--border mdl-typography--text-right'; 
    detailButton.className  = 'mdl-button mdl-js-button mdl-js-ripple-effect'; 

    // add special styles 
    card.style.width  = '100%'; 
    // card.style.opacity  = '0'; 

    // add text 
    h4.innerHTML    = $('#projectName').val(); 
    supportingPara.innerHTML = $('#projectDesc').val(); 
    detailButton.innerHTML  = 'Details'; 

    // build the title 
    title.appendChild(h4); 

    // build the supporting text 
    supportingText.appendChild(supportingPara); 

    // build the actions 
    cardActions.appendChild(detailButton); 

    // build the card 
    card.appendChild(title); 
    card.appendChild(supportingText); 
    card.appendChild(cardActions); 

    gridHolder.appendChild(card); 
    resultsHolder.insertBefore(gridHolder,resultsHolder.firstChild); 

    // now upgrade components so they are handled correctly by mdl 
    componentHandler.upgradeDom(gridHolder); 
} 
catch(e) { 
    alert(e); 
} 

Answer 2

嘗試$('#resultsHolder')[0]而不是那些功能。