Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.02.2021, 08:30
Интересующийся
Отправить личное сообщение для Wimko Посмотреть профиль Найти все сообщения от Wimko
 
Регистрация: 05.10.2019
Сообщений: 13

Не работает событие клика на динамически созданный элемент
Всем привет, учусь, хочу сделать динамическую форму, сделал кнопку которая добавляет новый 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 скрипта), если открыть "Просмотр страницы" этого блока нет. Если добавить все блоки без динамического добавления (Статически) второй скрипт работает... Подскажите в чем тут проблема?
Ответить с цитированием
  #2 (permalink)  
Старый 02.02.2021, 09:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Wimko,
клик ставят на родителя в котором появятся элементы
$(селектор_родителя).on("click", "селектор элемента", function(){})
Ответить с цитированием
  #3 (permalink)  
Старый 02.02.2021, 10:19
Интересующийся
Отправить личное сообщение для Wimko Посмотреть профиль Найти все сообщения от Wimko
 
Регистрация: 05.10.2019
Сообщений: 13

Сообщение от рони Посмотреть сообщение
Wimko,
клик ставят на родителя в котором появятся элементы
$(селектор_родителя).on("click", "селектор элемента", function(){})
Спасибо огромное, я до этого также пытался писать, не работала, потом еще раз попробовал заработало, но тут возникла проблема.... Как мне теперь определить в каком блоке из добавленных я пытаюсь добавить новые поля? Подразумеваю что через this, но пока не могу понять, можно даже ссылку скинуть я посмотрю. Подскажите как решить?
Ответить с цитированием
  #4 (permalink)  
Старый 02.02.2021, 10:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите не работает событие motoroller jQuery 2 01.04.2011 23:38
Doctype и javascript: не работает событие в Internet exproler nastya Internet Explorer 0 23.03.2011 12:26
событие на динам. элемент (jQery, Ajax, php) kost_ik jQuery 2 06.11.2010 12:16
Не отлавливается ДОМ -элемент, созданный динамически. Lifesaver jQuery 9 14.09.2010 14:24
Работает ли jquery с html сформированным динамически? warobushek Общие вопросы Javascript 5 13.06.2010 08:26