Новое в Javascript и JQuery: почему якоря AJAX будут работать только один раз?

Question

Я пришел из программирования на C, C ++ и Java, теперь мне нужно знать Javascript и JQuery для личного проекта, над которым я работаю.

Я создал главную страницу для своегопроект, который должен быть страницей "войти / создать учетную запись / отправить код сброса пароля / отправить код активации".Интересующие элементы:

• div, содержащий текущую форму
• div, содержащий привязки к другим формам
• div, содержащий два предыдущих div

Страница изначально начинается с формы входа в систему и связанной с ней привязки div.При нажатии на один из якорей в якоре div (например, якорь «создать учетную запись») вызывается метод JQuery replaceWith () для замены текущего div формы и якоря div на запрошенный div формы и связанный с ним якорный div.

Код работает ... но только один раз для каждого щелчка мышью.Почему это?Я поместил элементы JQuery в переменные до их использования, чтобы они были доступны, даже если они были «удалены» из DOM, или так я думал.Кто-нибудь может помочь пролить свет?

Вот код (".formAndLinksDivs" - это класс, данный всем div-элементам, которые включают в себя форму и якорный div, а "#content" - основной divстраница, которая включает в себя эти типы div):

var varCreateAccountFormAndLinksDiv;
var varLoginFormAndLinksDiv;
var varSendAnotherActivationCodeFormAndLinksDiv;
var varSendResetCodeFormAndLinksDiv;

$(function() {

    varCreateAccountFormAndLinksDiv = $("#createAccountFormAndLinksDiv");
    varLoginFormAndLinksDiv = $("#loginFormAndLinksDiv");
    varSendAnotherActivationCodeFormAndLinksDiv = $('#sendAnotherActivationCodeFormAndLinksDiv');
    varSendResetCodeFormAndLinksDiv = $('#sendResetCodeFormAndLinksDiv');

    $(".ajaxLinkCreateAccount").click(function() {
        $('#content > .formAndLinksDivs').replaceWith(varCreateAccountFormAndLinksDiv);
        $(varCreateAccountFormAndLinksDiv).effect('slide', {direction: "down", distance: $(this).height()});
    });

    $(".ajaxLinkLogin").click(function() {
        $('#content > .formAndLinksDivs').replaceWith(varLoginFormAndLinksDiv);
        $(varLoginFormAndLinksDiv).effect('slide', {direction: "down", distance: $(this).height()});
    });

    $(".ajaxLinkSendAnotherActivationCode").click(function() {
        $('#content > .formAndLinksDivs').replaceWith(varSendAnotherActivationCodeFormAndLinksDiv);
        $(varSendAnotherActivationCodeFormAndLinksDiv).effect('slide', {direction: "down", distance: $(this).height()});
    });

    $(".ajaxLinkSendResetCode").click(function() {
        $('#content > .formAndLinksDivs').replaceWith(varSendResetCodeFormAndLinksDiv);
        $(varSendResetCodeFormAndLinksDiv).effect('slide', {direction: "down", distance: $(this).height()});
    });
});

Answer 1

Если элементы, к которым вы присоединяете свои обработчики, заменяются новыми элементами, базовые методы присоединения обработчика событий «перезаписываются» при замене их элементов.Чтобы бороться с этим, используйте live () , чтобы прикрепить события.Это обеспечит применение обработчиков к любым элементам, соответствующим вашему селектору, даже если элементы добавлены / удалены.

Answer 2

Событие щелчка привязано к удаленному объекту, а не к новому объекту.

Взгляните на обработчик Live вместо использования привязки .click ().

Answer 3

.click() регистрируется при загрузке DOM..live('click', ...) привязан к произвольному элементу, который вам нужен, когда вы создаете элементы с помощью jQuery и присоединяете к ним события.

Поэтому я бы изменил определения типов этих типов:

$(".ajaxLinkSendResetCode").click(function()

На это:

$(".ajaxLinkSendResetCode").live('click', function()