0

Есть следующее:

<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");
    });
5
  • 2
    вторым параметром в on идет сам селектор, а не $. И замените этот ваш id^= на класс
    – teran
    21 сен 2020 в 6:16
  • ну так а разница? что класс, что id - надо динамически создавать и разные.
    – Антон
    21 сен 2020 в 6:43
  • @Антон класс у вас будет один. например add-btn. и тогда код будет такой $('#c_rows').on('click', '.add-btn', function.... 21 сен 2020 в 6:45
  • так а разве в таком случае клик не будет делегироваться на все классы? Мне ведь нужно получить дата атрибут той кнопки на которую кликнули чтобы увеличить это число на 1, и создать новую строку. В принципе в коде расписано.
    – Антон
    21 сен 2020 в 6:57
  • @Антон внутри обработчика, чтобы обратиться к дата атрибуту кликнутой кнопки надо будет взять $(this).... который при клике в конкретном контексте будет указывать на конкретную кнопку 21 сен 2020 в 6:59

1 ответ 1

1

Лучше не дублировать id по коду, а по поводу неработающих кнопок, то я вижу выход добавить класс add-btn на кнопку и селектор поменять на document on click, тогда всё работает, вот минимально изменный ваш пример:

$(document).on('click', '.add-btn', 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" class="add-btn" id="ab' + ItemCount + '" data-add="' + ItemCount + '">+</button>\n' +
           '                <button type="button" id="rb' + ItemCount + '" data-remove="' + ItemCount + '">-</button>\n' +
           '            </div>';
       $('#c_rows').append(row);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" class="add-btn" id="ab1" data-add="1">+</button>
                <button type="button" id="rb1" data-remove="1">-</button>
            </div>
        </div>

        <button type="submit">тык</button>
    </form>

2
  • и зачем на document вешать? обработчик вешается на самого ближайшего общего предка.
    – teran
    21 сен 2020 в 7:02
  • Обычно так использую при динамическом DOM
    – TheMY3
    21 сен 2020 в 7:06

Ваш ответ

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

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