javascript - Ajax 页面内容；先前单击的链接在点击后退按钮后第二次的行为不一样

Question

我正在创建一个网站，我希望在页面之间无缝转换(就像应用程序一样)。为此，我决定使用 ajax 从请求的页面中获取我需要的内容，并在中间使用预加载器作为转换。我有以下代码:

var url = "";
var historyUrl = "";

$('a').on('click', function(e){
    url = $(this).attr("href");
    historyUrl = window.location.pathname;

    e.preventDefault();

    $('#wrap main').removeClass('active');

    $("#wrap main").load(url + " #wrap main", function (responseText, textStatus, XMLHttpRequest) {
        if (textStatus == "success") {

            setTimeout(function() {
                $('#wrap main').addClass('active');
            }, 1000);

            history.pushState(null, null, url);

        }
        if (textStatus == "error") {
            // Error out
        }
    });

    e.stopPropagation();
});

$(window).on('popstate', function(){

    $('#wrap main').removeClass('active');

    $("#wrap main").load(historyUrl + " #wrap main", function (responseText, textStatus, XMLHttpRequest) {
        if (textStatus == "success") {
            setTimeout(function() {
                $('#wrap main').addClass('active');
            }, 1000);
        }
        if (textStatus == "error") {
            // Error out
        }
    });
});

正如你所看到的，我触发了所有 a 标签来测试这一点。这段代码在大多数情况下都可以正常工作。如果我转到第一页并单击链接，我会成功转换到第二页，而无需重新加载浏览器。 URL 发生变化并推送历史记录。如果我单击后退按钮，我也会成功返回第一页。

此后出现问题；如果我然后继续单击我第一次在第一页上单击的同一链接，它将忽略单击功能并仅像标准浏览器一样加载第二页。

我不明白为什么会发生这种情况。我认为这与pushState有关，但我不能完全确定它。

我在这里遗漏了一些明显的东西吗？

谢谢

Answer 1

当您动态加载内容时，事件不会自动绑定(bind)到元素。这就是为什么在动态更改回第一页后，没有用于单击链接的事件处理程序。

改变

$('a').on('click', function(e){

到

$(document).on('click', 'a', function(e){

它应该可以工作。

这会将点击事件推迟到文档(未更改)，并在第二个参数 ('a') 中的选择器与事件目标匹配时执行回调函数。