Селекторы не работают с ответом ajax

Question

Я использую ajax для отправки страниц и возврата блоков контента на основе действий пользователя для последовательности подключения.

Если у вас есть страница, которая загружается и получает 1 элемент содержимого, пользователь нажимает кнопку "Да" или "Нет", что загружает следующий элемент содержимого в то же пространство (через ajax).

По какой-то причине мои селекторы, похоже, не работают с этим загруженным ajax html.

Вот моя функция ajax, которая получает форму:

$.ajax({
    beforeSend: function() {
        $("#loader").toggleClass('progress');
    },
    type: 'POST',
    dataType: 'json',
    data: data,
    url: baseUrl+'welcome/user_confirmation_form',
    complete: function( response ) {
    $("#loader").toggleClass('progress');
    },
    success: function( response ) {
        console.log(response);
        $("div.welcome-page > .col").html(response.response);

        },
    error: function( response ) {
        $("#next-steps").html(response.response);
    }
    });

Затем я пытаюсь получить доступ к кнопке отправки (пытался сделать это как ahref и button type=submit, но, похоже, ничего не выбирает событие.

$('div.welcome-page').on('submit', "user_complete", function(e) {
            e.preventDefault();
            console.log('FOund form');

            var user = $(this).serializeArray();
            console.log(user);
        });

Если я просматриваю исходный код, HTML-код, возвращаемый ajax, отсутствует даже в dom, но при обычном просмотре пользовательского интерфейса.

Я предполагаю, что это как-то связано с этим?

Как я могу выбрать все данные формы?

Каждый раз, когда я нажимаю на кнопку или снова, просто снова запускается та же страница.

Answer 1

Если user_complete - это класс, который вы назначаете с помощью кнопки отправки в загруженном html, то вы пропускаете a .

$('div.welcome-page').on('submit', ".user_complete", function(e) {

Но это будет работать только в том случае, если вы используете действие отправки, так как прослушивает событие отправки. Может быть, вы хотите прослушать событие клика?

Answer 2

Вам нужно привязать события к вашим обработчикам для ваших новых добавленных элементов HTML. Ваш оригинальный звонок

$('div.welcome-page').on('submit' ...

Связать обработчик событий можно только с теми элементами, которые были на странице в тот момент времени.

Вы можете поместить свой обработчик в функцию...

var myHandler = function(e) {
  e.preventDefault();
  var user = $(this).serializeArray();
}

И затем после загрузки нового HTML вам нужно привязать обработчик к событию. Итак, в случае успеха с AJAX вы бы...

success: function( response ) {
  $("div.welcome-page > .col").html(response.response);
  $('div.welcome-page').on('submit', "user_complete", myHandler);
},