Materialize.css Динамические модалы + Аякс с глюками

Я недавно начал использовать materialize.css в своих проектах, и это было здорово. Однако на моем последнем веб-сайте я попытался создать динамические модалы с использованием данных, собранных с помощью ajax.

Модалы генерируются правильно, но появляется странный сбой. После генерации модального окна он должен автоматически открыться, но открывается только после трехкратного нажатия на триггер и генерирует три модальных режима (вы можете проверить его Вот).

Вот код:

$(".champion-card").click(function() {
var champion = $(this).find(".card-title").html();
var champion_id = champion_id = champion.replace(/ /g,"-").replace('.', "")+'Modal';
$.ajax({
type: 'POST',
url: 'getdata.php',
data: { scripts: champion },
success: function(data) {
$("body").append('<div id="'+champion_id+'" class="modal"><div class="modal-content"><h4>Scripts - '+champion+'</h4><div class="row"><ul class="list">'+data+'</ul></div></div></div>');
}
});
$('#'+champion_id).modal('open');
$('#'+champion_id).modal({
complete: function() {
$(this).remove();
}
});
});

«getdata.php» отображает только текст, содержащий опубликованные данные.

http://materializecss.com/modals.html говорит, что открытие модального режима выполняется кодом:

$('#modal1').modal('open');

Если я правильно помню, раньше это было .leanModal (), но я не думаю, что это причина. Разочарование в том, что он открывается после 3 кликов, генерируя 3 модала с одинаковым идентификатором.

Я не мог найти, что случилось, и я, хотя, может быть, сообщество может помочь. Ошибки не получены.

Спасибо!