Есть следующее:
<form method="post" action="">
<input type="text" name="table" placeholder="имя таблицы">
<div class="column_rows" id="c_rows">
<div class="row" id="r1">
<input type="text" name="name_field" placeholder="имя поля">
<select name="type_field">
<option default="default" value="0">Выбор типа</option>
<option value="1">Текстовое поле</option>
<option value="2">числовое поле</option>
<option value="3">дата</option>
</select>
<input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
<button type="button" id="ab1" data-add="1">+</button>
<button type="button" id="rb1" data-remove="1">-</button>
</div>
</div>
<button type="submit">тык</button>
</form>
при клике на +
еще одно поле добавляется, при клике на -
- удаляется.
Получается подобный HTML:
<div class="column_rows" id="c_rows">
<div class="row" id="r1">
<input type="text" name="name_field" placeholder="имя поля">
<select name="type_field">
<option default="default" value="0">Выбор типа</option>
<option value="1">Текстовое поле</option>
<option value="2">числовое поле</option>
<option value="3">дата</option>
</select>
<input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
<button type="button" id="ab1" data-add="1">+</button>
<button type="button" id="rb1" data-remove="1">-</button>
</div>
<div class="row" id="r2"> <input type="text" name="name_field" placeholder="имя поля">
<select name="type_field">
<option default="default" value="0">Выбор типа</option>
<option value="1">Текстовое поле</option>
<option value="2">числовое поле</option>
<option value="3">дата</option>
</select>
<input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
<button type="button" id="ab2" data-add="2">+</button>
<button type="button" id="rb2" data-remove="2">-</button>
</div><div class="row" id="r3"> <input type="text" name="name_field" placeholder="имя поля">
<select name="type_field">
<option default="default" value="0">Выбор типа</option>
<option value="1">Текстовое поле</option>
<option value="2">числовое поле</option>
<option value="3">дата</option>
</select>
<input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
<button type="button" id="ab3" data-add="3">+</button>
<button type="button" id="rb3" data-remove="3">-</button>
</div><div class="row" id="r4"> <input type="text" name="name_field" placeholder="имя поля">
<select name="type_field">
<option default="default" value="0">Выбор типа</option>
<option value="1">Текстовое поле</option>
<option value="2">числовое поле</option>
<option value="3">дата</option>
</select>
<input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
<button type="button" id="ab4" data-add="4">+</button>
<button type="button" id="rb4" data-remove="4">-</button>
</div><div class="row" id="r5"> <input type="text" name="name_field" placeholder="имя поля">
<select name="type_field">
<option default="default" value="0">Выбор типа</option>
<option value="1">Текстовое поле</option>
<option value="2">числовое поле</option>
<option value="3">дата</option>
</select>
<input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
<button type="button" id="ab5" data-add="5">+</button>
<button type="button" id="rb5" data-remove="5">-</button>
</div></div>
Кнопка добавить первом элементе, (который статически есть) - работают, на остальных - нет. Для кнопки удаления еще не писал код.
Пробовал решить так как было описано тут. У каждой кнопки свой id + $(document).ready()..
- не помогло.
Как по мне причина в том что клик происходит по элементу которого якобы нет, так как он динамически создавался, думал делегирование эту проблему решит - но возник другой вопрос, как объяснить к какому элементу нужно обратиться при делегировании если мы не знаем на какой элемент может быть клик. В общем как это можно разрулить?
Код добавления:
$('[id^="ab"]').click(function () {
let ThisCount = $(this).attr('data-add');
let last = $('#c_rows').children().last();
let LastCount = last.children('button').attr('data-add');
LastCount = Number(LastCount);
let ItemCount = (LastCount + 1);
let row = '<div class="row" id="r' + ItemCount +'"\n>'+
' <input type="text" name="name_field" placeholder="имя поля">\n' +
' <select name="type_field">\n' +
' <option default="default" value="0">Выбор типа</option>\n' +
' <option value="1">Текстовое поле</option>\n' +
' <option value="2">числовое поле</option>\n' +
' <option value="3">дата</option>\n' +
' </select>\n' +
' <input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">\n' +
' <button type="button" id="ab' + ItemCount + '" data-add="' + ItemCount + '">+</button>\n' +
' <button type="button" id="rb' + ItemCount + '" data-remove="' + ItemCount + '">-</button>\n' +
' </div>';
$('#c_rows').append(row);
});
Попытка делегирования
$('#c_rows').on('click', $('[id^="ab"]'), function () {
console.log(this);
alert("32");
});
on
идет сам селектор, а не$
. И замените этот вашid^=
на классadd-btn
. и тогда код будет такой$('#c_rows').on('click', '.add-btn', function....
$(this)
.... который при клике в конкретном контексте будет указывать на конкретную кнопку