Обработка динамически добавленных элементов Material Design Lite
 

Всем привет!
Сначала код:

<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>

$(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();
		});
	});
});

Задача:
По нажатию кнопки вставить динамически на страницу еще одно поле [.mdl-textfield], к которому нужно применить "Материальный дизайн" от Google

Все бы хорошо, но методы

componentHandler.upgradeAllRegistered();

или

componentHandler.upgradeDom();

ни в какую не хотят обновлять, вновь появившиеся, элементы на странице.