单击使用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属性，然后使用pushState更改url。 然后，我正在使用AJAX采取href和抓住所有的HTML是一个div容器，在这种情况下是id的专区内transition ，并做内容之间有些褪色。 因此，我将页面上的HTML替换为使用Ajax提取的HTML。

第一次单击带有transitionLink类的锚链接时，此方法可以很好地工作，但是一旦我尝试单击从ajax调用获得的HTML内收到的另一个锚链接，它就不会使用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();