При нажатии на ссылку добавить еще динамически генерируется div, который добавляет дополнительный ввод текста и ссылку добавить еще. Эта динамически вставленная ссылка добавить еще не реагирует на событие клика. Несмотря на то, что каждая динамически вставленная ссылка имеет уникальный идентификатор, а событие щелчка использует «делегированную» привязку с помощью метода JQuery on(), динамически вставляемая ссылка не работает, добавляя дополнительные поля при нажатии. Вот jsbin и весь код ниже:
Javascript:
<script type="text/javascript">
$(document).on("ready", function(){
return $(".add_people_filter").on("click", function(event){
event.preventDefault();
var time = new Date().getTime();
var dynamicallyCreatedDiv = document.createElement("div");
dynamicallyCreatedDiv.id = time;
var peopleFilterContainerDiv = $("#people_filter_container");
peopleFilterContainerDiv.append(dynamicallyCreatedDiv);
var getHtmlForDynamicDiv = $(".people_filter").html();
var theNewDiv = $(dynamicallyCreatedDiv);
theNewDiv.append(getHtmlForDynamicDiv);
var AddUniqueIdToLinK = time * 2;
var x = time * 3;
$(this).attr('id', AddUniqueIdToLinK);
theNewDiv.find("a:last").attr('id', x);
return theNewDiv;
});
});
</script>
HTML-код:
<div id="people_filter_container">
<div class="people_filter" >
<input type="text" name="firstname" placeholder="add name" >
<a href="#" data-behavior="add_people_filter" class="add_people_filter"> add more</a>
<br> <br>
</div>
</div>