處理動態添加元素材料設計精簡版

Question

首先，代碼：

$(document).ready(function() { 
 
\t $('#member_pattern').hide(); 
 
\t $('.add-member').click(function() { 
 
\t \t var clone = $('#member_pattern').clone(), cont = $('.members-cont'); 
 
\t \t $(cont).append(clone); 
 
\t \t $(cont).find('#member_pattern').show(200, function() { 
 
\t \t \t $(this).attr('id', ''); 
 
\t \t \t componentHandler.upgradeAllRegistered(); 
 
\t \t }); 
 
\t }); 
 
});

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
 

 
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-indigo.min.css" /> 
 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 

 
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> 
 
<div class="members-cont"> 
 
\t <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
 
\t \t <input class="mdl-textfield__input" type="text" id="first_name_<?php echo $member->id; ?>" value="<?php echo $member['first_name']; ?>"/> 
 
\t \t <label class="mdl-textfield__label" for="first_name_<?php echo $member->id; ?>">Имя</label> 
 
\t </div> 
 
</div> 
 

 
<button class="add-member add-member-top mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> 
 
\t <i class="material-icons">add</i> 
 
</button> 
 

 
<div id="member_pattern" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
 
\t <input class="mdl-textfield__input" type="text" id="[name]_[id]" value=""/> 
 
\t <label class="mdl-textfield__label" for="[name]_[id]">Имя</label> 
 
</div>

目的： 按下頁面上的按鈕動態插入另一場[.mdl文件，文本框]，你想在Google上應用「材料設計」

一切都很好，但方法 componentHandler.upgradeAllRegistered（）; 或 componentHandler.upgradeDom（）; 在任何不想更新，重新出現的頁面上的元素。

Answer 1

我也遇到了克隆元件並使其正常工作的問題。我所做的就是從div中刪除MDL特定的類，並將其更改爲我可以選擇的通用類名稱。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 

成爲

<div class="upgradeTextField"> 

然後在JavaScript，克隆元素之後，我選擇用於這些div克隆元件內，並添加了MDL特定類給他們。之後，運行componentHandler.upgradeDom（）似乎工作。

var textFieldUpgrades = cloned.querySelectorAll('.upgradeTextField'); 

if(textFieldUpgrades) { 

    for(var i=0;i<textFieldUpgrades.length;++i) { 
     textFieldUpgrades[i].className = 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label'; 
    } 

} 
componentHandler.upgradeDom(); 

我沒有驗證這一點，但似乎當你克隆先前已升級由MDL的DOM中現有的元素，它不會在你的克隆對象添加到DOM升級。所以這就是爲什麼我簡單地刪除了MDL類，因此它不會事先升級。

另外，如果你需要它事先升級，並仍然想克隆它。然後，您可以執行的操作是在克隆元素後從元素中刪除屬性「數據升級」和類「升級」。然後當你運行componentHandler.upgradeDom（）時，它應該升級它。因此，而不是隻設置類名稱，如上面的代碼中，你只需刪除升級信息：

textFieldUpgrades[i].setAttribute('data-upgraded',''); 
textFieldUpgrades[i].className = textFieldUpgrades[i].className.replace(/is-upgraded/g,''); 

這似乎爲我工作。

Answer 2

感謝您的回答，但事實證明，解決它更簡潔的方式

var index = $('.member-section').length; 
 
var clone = $('.member-section-pattern').clone(); 
 
$(clone) 
 
    .removeClass('member-section-pattern') 
 
    .find(':not([data-upgraded=""])').attr('data-upgraded', ''); 
 

 
$('.members-cont').append(clone); 
 
$(clone).show(200, function() { 
 
    componentHandler.upgradeAllRegistered(); 
 
});