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并获取容器div中的所有HTML（在本例中为ID为transition的div），并在内容之间进行淡入淡出。因此，我将页面上的HTML替换为使用Ajax提取的HTML。

这是我第一次单击类为transitionLink的锚链接时的完美效果，但是一旦我尝试单击另一个锚链接，即从ajax调用获得的HTML中收到的链接，则不会然后使用ajax函数抓取HTML并将其替换，而是像普通链接一样链接。

我认为与此有关的问题是使用ajax提取的内容无法识别ajax函数，这就是为什么它像普通链接一样起作用的原因。

我的问题是布局函数的最佳方法是什么，以便在单击从ajax调用收到的锚链接时，ajax调用仍然可以正常工作？

Answer 1

如果要向页面动态添加内容，则每次添加内容时都需要重新注册Jquery侦听器。


import { InputsModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';

单击使用Ajax收到的锚链接时是否重新运行功能？

1 个答案: