Ajax正在浏览页面内容；之前点击 link 在点击后退按钮后第二次表现不一样

Question

我正在创建一个网站，我想在其中无缝地切换页面（就像一个应用程序）。为此，我决定 ajax-ing 从请求的页面中获取我需要的内容，并在两者之间使用预加载器作为过渡。我有以下代码：

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 标签以对此进行测试。这段代码在大多数情况下都可以正常工作。如果我转到第一页并单击 link，我会成功转换到第二页，而无需重新加载浏览器。 URL 更改并推送历史记录。如果我然后单击后退按钮，我也将成功返回到第一页。

此后问题出现；如果我然后继续单击我第一次单击第一页时相同的 link，它会忽略单击功能并像标准浏览器一样加载第二页。

我不明白为什么会这样。我认为这与 pushState 有关，但我不能完全确定它。

我是不是漏掉了什么明显的东西？

谢谢

Answer 1

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

改变

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

到

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

它应该可以工作。

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

Ajax正在浏览页面内容；之前点击 link 在点击后退按钮后第二次表现不一样

Ajax'ing page content; previously clicked link doesn't behave the same the second time after back button hit

javascript

jquery

ajax

pushstate

html5-history