Javascript Ajax'；编辑页面内容；以前单击的链接不'；在按下后退按钮后，第二次的行为不会相同

我正在创建一个我希望在页面之间无缝转换的网站（如应用程序）。为了做到这一点，我已经决定使用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更改，历史记录被推送。如果我点击后退按钮，我也会成功返回到第一页

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

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

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

---

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

改变

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

到

它应该会起作用

---

如果第二个参数（

'a'

）中的选择器与事件目标匹配，则这会将单击事件延迟到文档（未更改），并执行回调函数。

另一方面，将元素延迟到文档并不是很好的做法，因为整个页面上的每次单击都会触发该事件，jQuery检查事件目标，然后继续或中止。因此，在不破坏功能的情况下，您应该尽可能遵从父元素。例如，当仅将页面的一部分加载到id=“pagecontent”的div元素中时，可以将单击事件仅绑定到ajax请求成功回调中的所有

$（“#pagecontent a”）

元素。那会干净得多。

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