PopState不按預期工作。

我在主頁上有一個圖像列表，點擊後我發起一個AJAX請求，將內容加載到一個燈箱。我也有他們之間的分頁。每次用戶點擊下一個或上一個箭頭時，我都會使用PushState更改URL，並且運行良好。我對後退按鈕有問題。有時我需要點擊兩次或更多才能返回。當它不回去時它只是重新加載相同的內容。PopState不按預期工作。

$(document).on("click", ".content a", function(event){ 
    event.preventDefault(); 
    var url = $(this).attr("href"); 
    $("body").append($overlay); 
    history.pushState({}, '', url); 
    $.ajax({ 
     url : url, 
     type : 'GET', 
     success : function(data){ 
     $overlay.append(data); 
     $overlay.show(); 
     } 
    }); 
}); 

$(document).on("click", ".fa-angle-right", function(event){ 
    event.preventDefault(); 
    var url = $(this).parent("a").attr("href"); 
    history.pushState({}, '', url); 
    $.ajax({ 
     url : url, 
     type : 'GET', 
     success : function(data){ 
     $overlay.html(data); 
     } 
    }); 
}); 

$(window).on("popstate", function(event) { 
    var url = location.href; 
    $.ajax({ 
     url : url, 
     type : 'GET', 
     success : function(data){ 
     $overlay.html(data); 
     } 
    }); 
});

來源

2016-02-28 Itzik Ben Hutta

你曾經推動兩次相同的狀態嗎？如果你是，或者你的事件處理程序意外造成這種情況，它可能會解釋爲什麼你必須告訴它返回兩次或更多。 –

是的你是對的。每次關閉燈箱並再次打開時，它都會添加一個額外的請求。我需要明白爲什麼它會這樣做。感謝您指出問題。 –

很酷。我把它作爲答案，以便您可以將其標記爲已解決。 –

你很可能會推動相同的狀態兩次，可能事件處理程序不止一次觸發。

當你調試的原因，那麼你會解決你的情況下行事不端PopState :)

來源

2016-02-28 03:33:05

PopState不按預期工作。

回答

相關問題