Динамическое добавление полей форм jQuery

#jquery

                    


var count_input = 0;

function addFiel () {
	var telnum = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3))+1;
	$('div#add_field_area').append('
 Поле
№'+telnum+'
Еще
новое
');

}
function addD () {
	var tel = parseInt($('#ad_f').find('div.dob:last').attr('id').slice(3))+1;
	$('div#ad_f').append('

'); } function deleteField (id) { $('div#add'+id).remove(); } input { height: 20px; margin: 5px; width:400px; } .addbutton { text-align: center; vertical-align:middle; font-size: 13px; width: 283px; border: 1px solid #70A9FD; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; cursor: pointer; margin: 2px 0 0 110px; color: #326DC5; padding: 4px; background-color:#BED6FF; } .deletebutton { width: 20px; height: 22px; cursor: pointer; margin: 5px; display:inline-block; background: url(delete.png) repeat; background-position: center center; background-repeat: no-repeat; position:absolute; top: 1px; left: 480px; } .add { position:relative; }

Добавить новое поле

При нажатии на кнопку ДОБАВИТЬ НОВОЕ ПОЛЕ, добавляем два поля. После этого нажимаем на кнопку ЕЩЕ НОВОЕ для поля №2 и добавление происходит в поле №1 и поле №2. Как сделать чтоб каждому полю соответствовали свои кнопки?

Ответы

Ответ 1

Использовать всплытие событий и подниматься до нужного контейнера:



$(document).on('click', ".container .add-group", function() {
  var container = $(this).closest(".container");
  container.append(
    $("#group-template").html()
    .replace(/\{\{g\}\}/g, container.children(".group").last().data("i") + 1 || 1)
  );
}).on('click', ".group .add-field", function() {
  var group = $(this).closest(".group");
  group.append(
    $("#field-template").html()
    .replace(/\{\{g\}\}/g, group.data("i"))
    .replace(/\{\{f\}\}/g, group.children(".field").last().data("i") + 1 || 1)
  );
}).on('click', ".group .field .remove-field", function() {
  $(this).closest(".field").remove();
});
section {
  border: 1px solid;
  margin: 1em 0;
}







  





PS: Лучше воспользоваться нормальным шаблонизатором.