处理动态添加的元素Material Design Lite

Question

一,代码:

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

<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">
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
		<input class="mdl-textfield__input" type="text" id="first_name_<?php echo $member->id; ?>" value="<?php echo $member['first_name']; ?>"/>
		<label class="mdl-textfield__label" for="first_name_<?php echo $member->id; ?>">???</label>
	</div>
</div>

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

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

目标:通过按页面上的按钮动态插入另一个字段[.mdl-textfield],您想在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类,所以它不会事先升级.

或者,如果您需要事先升级并仍想克隆它.然后,您可以做的是在克隆之后从元素中删除属性"data-upgraded"和类"is-upgraded".然后当你运行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();
});