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

Я использую 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 и тип кнопки = отправить, но, похоже, ничто не выбирает событие.

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

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

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

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

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

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


ajax materialize
person Solvision    schedule 27.03.2016    source источник
comment
Когда вы пытаетесь манипулировать формой? AJAX загружается асинхронно. Обработчик вызывается, когда весь текущий скрипт выполнен и управление возвращается браузеру. Вы уверены, что получили доступ после вставки DOM?   -  person Quasimodo's clone    schedule 28.03.2016

Ответы (2)


arrow_upward
1
arrow_downward

Если user_complete — это класс, который вы назначаете кнопке отправки в загруженном html, то вам не хватает файла .

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

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

person Steve Harris    schedule 27.03.2016

arrow_upward
0
arrow_downward

Вам нужно связать события с вашими обработчиками для ваших недавно добавленных элементов 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);
},
person Greg    schedule 27.03.2016