Ajax'ing 页面内容；以前点击的链接在点击后退按钮后第二次的行为不一样

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
        }
    });
});

如您所见，我正在触发所有标签以进行测试。此代码在大多数情况下都可以正常工作。如果我转到第一页并单击一个链接，我会成功转换到第二页，而无需重新加载浏览器。 URL 更改并推送历史记录。如果我然后单击返回按钮，我也将成功返回第一页。

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

我无法弄清楚为什么会发生这种情况。我认为这与 pushState 有关，但我不能完全确定它。

我在这里遗漏了什么明显的东西吗？

谢谢

Answer 1

当您动态加载内容时，事件不会自动绑定到元素。这就是为什么动态变回第一页后，没有点击链接的事件处理程序。

改变

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

到

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

它应该可以工作。

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