Почему jQuery не работает с фрагментом HTML, который jQuery добавил на страницу через Ajax?

Приведенный ниже код просто отправляет форму через Ajax и добавляет результат из скрипта addNewUser.php в небольшое всплывающее окно.

//activate the signup submit button
$('#button_signup_submit').click(function() {

    document.getElementById("popup_signup").style.display = "none";
    document.getElementById("popup_signup_step_two").style.display = "block";
    //submit the form info via ajax to addNewUser.php
    $.ajax({
         type: "POST",
         url: "ajax/addNewUser.php",
         data: { 
            username: document.forms["form_signup"]["username"].value,
            password: document.forms["form_signup"]["password"].value
         },
         datatype: "html",
         success: function(data){

                    var jqObj = jQuery(data);
                    $('#popup_signup_step_two').append(jqObj)
                }
    });

});

Я могу получить приведенный выше скрипт для добавления ajaxed html на исходную веб-страницу без проблем... но когда я собираюсь использовать свой второй кусок кода:

//activate the second signup page's return button
$('#return_to_signup_form_from_ajax_popup').click(function() {
    alert("HEY");
    //erase innerHtml of popup_signup_step_two
    document.getElementById("popup_signup_step_two").innerHTML = "";
    document.getElementById("popup_signup_step_two").style.display = "none";

    //show the original signup form again, should contain user's original values
    document.getElementById("popup_background").style.display = "block";
    document.getElementById("popup_login").style.display = "block";

});

... который является фрагментом jQuery, который работает с недавно добавленным html... ничего не происходит. Этот второй фрагмент кода применяется, когда пользователь забывает ввести имя пользователя или пароль, и ему выдается это сообщение через ajax:

<p>Go <span id="return_to_signup_form_from_ajax_popup">back</span> and enter a username and password.</p>

Я предполагаю, что все это как-то связано с DOM? Но в конечном итоге я понятия не имею. Если бы кто-нибудь мог даже указать мне в направлении того, что искать, я был бы очень признателен.

Источник

3 ответа

Решение

Ну, пока вы уверены, что ответ возвращает правильный HTML - вы должны делать все хорошо. Я бы рекомендовал изменить ваш обработчик кликов на делегированный обработчик - тогда вам не нужно беспокоиться о том, был ли он инициализирован до или после добавления ajax'd html в live dom.

РЕДАКТИРОВАТЬ: обновлен для использования последней JQuery on метод. (Http://api.jquery.com/on/)

$('#containerElementThatAjaxdDataWillGoInto').on('click','#return_to_signup_form_from_ajax_popup', clickHandler );

РЕДАКТИРОВАТЬ: Вот еще одна попытка ясности.

Вы ajaxing в новом HTML, и вы добавляете его в #popup_signup_step_two, Потрясающие. Так что у этого нового HTML также есть кнопка, с которой должен быть связан обработчик. Для этого нам нужно делегировать обработчик события #popup_signup_step_two так что мы можем прослушивать все клики на любом элементе, который мы хотим внутри этого элемента dom.

$('#popup_signup_step_two').on('click', '#return_to_signup_form_from_ajax_popup', function() {
    // do stuff here
});

Теперь, когда у вас есть эта настройка (внутри готового документа), любой щелчок по элементу #return_to_signup_form_from_ajax_popup Внутри #popup_signup_step_two вызовет вашу функцию обработчика кликов. Теперь внутри вашего текущего обработчика кликов, вы устанавливаете #popup_signup_step_two в display = none, Итак, если вы хотите выполнить это действие снова, вам нужно убедиться, что вы установили элемент на displayblock,

Я надеюсь, что это поможет больше, если мы все еще где-то упускаем друг друга, сейчас самое время начать вносить изменения в jsfiddle или дать ссылку.

Источник

Если твой $('#return_to_signup_form_from_ajax_popup') обработчик кликов привязан к документу. Вместо этого вам нужно будет использовать делегирование событий. Делегирование событий используется для привязки событий к текущим и будущим элементам.

См. http://api.jquery.com/on/ и http://api.jquery.com/category/deferred-object/ для получения дополнительной информации о делегировании событий.

Источник

Вместо использования $.ajax() используйте $('#popup_signup_step_two').load()

проверьте здесь для ссылки на метод

Источник
Другие вопросы по тегам