Селекторите не работят с отговор на 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 и бутон type=submit, но изглежда нищо не избира събитието.

$('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