Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не работает событие клика на динамически созданный элемент (https://javascript.ru/forum/dom-window/81820-ne-rabotaet-sobytie-klika-na-dinamicheski-sozdannyjj-ehlement.html)

Wimko 02.02.2021 08:30

Не работает событие клика на динамически созданный элемент
 
Всем привет, учусь, хочу сделать динамическую форму, сделал кнопку которая добавляет новый Form-group, внутри каждого form-group есть еще коллекция input-ов, как мне осуществить добавление в эту коллекцию, в созданном form-group?
$('#btn_add').click(function(){
      let currentFields = $('#block_test .alert').length;
        currentFields++;
            $('#block_insert').append(' <div class="alert alert-success mt-4" role="alert">\                                       
                                                <div class="form-group">\
                                                    <p class="mt-3" style="font-weight:bold;">Блок № '+currentFields+'</p>\
                                                    <div id="block_group_'+currentFields+'">\
                                                        <div id="group_1" class="input-group mb-2">\
                                                            <div class="input-group-prepend">\
                                                                <div class="input-group-text"><b>1</b></div>\
                                                            </div>\
                                                            <input type="text" name="value_'+currentFields+'[]" class="form-control " id="v'+currentFields+'" required>\
                                                        </div>\
                                                        <div id="group_2" class="input-group mb-2">\
                                                            <div class="input-group-prepend">\
                                                                <div class="input-group-text"><b>2</b></div>\
                                                            </div>\
                                                            <input type="text" name="value_'+currentFields+'[]" class="form-control" id="v'+currentFields+'" >\
                                                        </div>\
                                                       
                                                    </div>\
                                                    <div>\
                                                        <button id="add_'+currentFields+'" type="button" class="btn btn-success mt-2 mb-2">Добавить новое поле</button>\
                                                        <button id="rem_'+currentFields+'" type="button" class="btn btn-danger mt-2 mb-2">Удалить</button>\
                                                    </div>\
                                                </div>\
                                            </div>');
                                                    return false;
                                            });


А потом я пытаюсь сделать вот такое

$('#add_2').click(function(){
            let currentFields = $('#block_group_2 input').length;
        currentFields++;
            $('#block_group_2').append('<div id="group_'+currentFields+'" class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text"><b>'+currentFields+'</b></div> </div> <input type="text" name="value_1[]" class="form-control " id="v1_'+currentFields+'"> </div>');



            return false;
    });


Не работает... Я не так что-то делаю, напомню, что второе обращение применяется к динамически добавленному блоку (из 1 скрипта), если открыть "Просмотр страницы" этого блока нет. Если добавить все блоки без динамического добавления (Статически) второй скрипт работает... Подскажите в чем тут проблема?

рони 02.02.2021 09:15

Wimko,
клик ставят на родителя в котором появятся элементы
$(селектор_родителя).on("click", "селектор элемента", function(){})

Wimko 02.02.2021 10:19

Цитата:

Сообщение от рони (Сообщение 533379)
Wimko,
клик ставят на родителя в котором появятся элементы
$(селектор_родителя).on("click", "селектор элемента", function(){})

Спасибо огромное, я до этого также пытался писать, не работала, потом еще раз попробовал заработало, но тут возникла проблема.... Как мне теперь определить в каком блоке из добавленных я пытаюсь добавить новые поля? Подразумеваю что через this, но пока не могу понять, можно даже ссылку скинуть я посмотрю. Подскажите как решить?

рони 02.02.2021 10:43

Wimko,
var index = $("селектор элемента").index(this)


Часовой пояс GMT +3, время: 21:51.