Функция перезапуска при нажатии на ссылку привязки, полученную с помощью Ajax?

Question

Я пытаюсь создать эффект перехода страницы, используя jQuery и Ajax.В настоящее время у меня есть:

$(".transitionLink").on("click", function (event) {

    event.preventDefault();

    var href = $(this).attr("href");

    window.history.pushState(null, null, href);

    $(".transitionLink").removeClass("transitionLink--active");
    $(this).addClass("transitionLink--active");

    $.ajax({
            url: href,
            success: function (data) {
                $("#transition").fadeOut(250, function () {


                    var newPage = $(data).find('#transition').html();


                    $("#transition").html(newPage);


                    $("#transition").fadeIn(250);

                });



            }
    });

});

Так что, когда мы нажимаем на тег привязки с классом transitionLink, он захватывает атрибут href, а затем изменяет URL, используя pushState.Затем я использую ajax, чтобы взять этот href и захватить весь HTML, который находится внутри контейнера div, который в этом случае является div с идентификатором transition, и сделать некоторое затухание между контентом.Поэтому я заменяю HTML на странице HTML-кодом, извлеченным с использованием ajax.

Это прекрасно работает, когда я впервые щелкаю ссылку привязки с классом transitionLink, но как только я пытаюсь щелкнуть другую ссылку привязки, этобыл получен в HTML и получен от вызова ajax, он не использует функцию ajax для захвата HTML и его замены, вместо этого он просто ссылается, как обычная ссылка.

Полагаю, проблема в том, что контент, извлекаемый с помощью ajax, не распознает функцию ajax, и поэтому он функционирует как обычная ссылка.

Мой вопрос - что лучше?способ размещения моей функции таким образом, чтобы вызов ajax продолжал работать при нажатии на ссылку привязки, полученную при вызове ajax?

Answer 1

Если вы динамически добавляете контент на свою страницу, вам необходимо регистрировать прослушиватель Jquery при каждом добавлении контента.

function registerEvents() {
    $(".transitionLink").on("click", handleTransitionClick);
}

function handleTransitionClick(event) {
    event.preventDefault();
    var href = $(this).attr("href");
    window.history.pushState(null, null, href);
    $(".transitionLink").removeClass("transitionLink--active");
    $(this).addClass("transitionLink--active");
    $.ajax({
        url: href,
        success: function (data) {
            $("#transition").fadeOut(250, function () {
                var newPage = $(data).find('#transition').html();
                $("#transition").html(newPage);
                $("#transition").fadeIn(250);
                // Notice here, we are reruning the registerEvents function so the new elements will be registered aswell.
                registerEvents();
            });
        }
    });

}
// Here we are running the register function once, so the initial listener will be added to the initial elements.
registerEvents();