3

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('<div id="add'+telnum+'" class="add"><label> Поле №'+telnum+'</label><input type="text" width="120" name="val[]" id="val"  value=""/><div id="ad_f"><div id="dob0" class="dob"></div><div onclick="addD();" class="addbutton">Еще новое</div></div><div class="deletebutton" onclick="deleteField('+telnum+');"></div></div>');

}
function addD () {
	var tel = parseInt($('#ad_f').find('div.dob:last').attr('id').slice(3))+1;
	$('div#ad_f').append('<div id="dob'+tel+'" class="dob"></div><input type="text"></div><div class="deletebutton" onclick="deleteField('+tel+');">');
}
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
       <div id="add_field_area">
         <div id="add0" class="add">
         </div>
        </div>
<div onclick="addFiel();" class="addbutton">Добавить новое поле</div>

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

1 ответ 1

3

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

$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id=group-template type=text/html>
  <section class=group data-i={{g}}>
    <p>
      <label for=g-{{g}}>Группа {{g}}</label>
      <input type=text id=g-{{g}} />
      <button class=add-field>Add field</button>
    </p>
  </section>
</script>

<script id=field-template type=text/html>
  <p class=field data-i={{f}}>
    <label for=f-{{g}}-{{f}}>Поле {{f}}</label>
    <input type=text id=f-{{g}}-{{f}} />
    <button class=remove-field>Remove field</button>
  </p>
</script>

<div class=container>
  <button class=add-group>Add group</button>
</div>

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

3
  • Не хватает только удаления, было бы вообще круто 1 сен 2015 в 21:06
  • @AlexProsto, добавил, без перенумерации.
    – Qwertiy
    1 сен 2015 в 21:37
  • Да, теперь то что надо))) Спасибо))) 2 сен 2015 в 4:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.