Ajax'ing頁面內容;先前點擊的鏈接在後退按鈕點擊後的第二次行爲不相同

我正在創建一個網站，我喜歡在頁面之間無縫切換（如應用程序）。爲了做到這一點，我已經決定使用一個預加載器作爲轉換從所請求的頁面中獲取我需要的內容。我有以下代碼：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 
     } 
    }); 
});

正如你可以看到我觸發所有的標籤爲了測試這一點。這段代碼大部分工作正常。如果我轉到第一頁並單擊一個鏈接，我將成功轉換到第二頁，而無需重新加載瀏覽器。網址更改並推送歷史記錄。如果我再點擊後退按鈕，我也會成功回到第一頁。

之後會出現問題;如果我繼續點擊第一次點擊第一頁上的同一個鏈接，它將忽略點擊功能，然後像標準瀏覽器那樣加載第二頁。

我不明白爲什麼會發生這種情況。我認爲這與pushState有關，但我無法完全理解它。

我在這裏錯過了一些明顯的東西嗎？

感謝

來源

2017-02-14 OllyF

當你動態加載的內容，事件不會自動的必然要素。這就是爲什麼在動態改變回第一頁之後，沒有事件處理程序用於點擊鏈接。

變化

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

到

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

，它應該工作。

如果第二個參數（'a'）中的選擇器與事件目標匹配，則將單擊事件推遲到文檔（不會更改）並執行回調函數。

來源

2017-02-14 16:29:26 Connum

砸死它，傳說！解決了一切，謝謝！ – OllyF

附註：將元素推遲到文檔並不是很好的做法，因爲每次點擊整個頁面都會觸發該事件，jQuery將檢查事件目標，然後繼續或中止。所以你應該遵循關閉父元素而不破壞功能。例如，當只加載頁面的一部分到讓我們說id =「pagecontent」的div元素時，您可以將click事件綁定到您的ajax成功回調中的所有'$（'＃pagecontent a'）'元素請求。這將會更清潔。 – Connum

Ajax'ing頁面內容;先前點擊的鏈接在後退按鈕點擊後的第二次行爲不相同

回答

相關問題