onpopstate返回數據兩次

Question

我已經開始玩弄onpopstate，但遇到了問題。每當我點擊瀏覽器上的後退按鈕時，網址都會相應改變，但頁面代碼會加載兩次，因此我會收到兩個列表和兩個div。爲什麼它產生了兩倍的代碼，我該如何解決它？示例代碼如下。

<style type="text/css"> 

div {width: 200px; height: 200px; border: 1px solid;} 

</style> 

<ul> 

    <li class="sour"> 

    <input type="button" value="1"/> 

    </li> 

</ul> 

<script type="text/javascript" > 


$('ul li:nth-child(1)').click(function() { 
var url = $(this).index(); 
$('#insert').load('1.php'); 
window.history.pushState('', '', 'test1.php?challenge=' + url); 
e.preventDefault(); 
}); 


window.onpopstate = function(event) { 
    $('#insert').load(location.pathname); 
}; 

</script> 


<div id="insert"> 

<p>hello there</p> 

</div> 

這裏是1.PHP

<p>first file</p> 

內容下面是一些截圖我把什麼視覺上發生的鏈接。第一個圖像是我第一次加載屏幕時。第二個圖像是當我按下按鈕1時發生的情況。第三個圖像是當我點擊瀏覽器時發生的情況。

http://imgur.com/Nsqej,E1Ydc,sFCLl#0

Answer 1

根據您描述的問題順序，onpopstate會將test1.php的內容加載到#insert div中。由於着陸頁也是test1.php，這會導致您的屏幕截圖中出現重複。

您可以使用jquery-pjax來解決別人的問題。如果你不綁定jQuery，那裏還有其他解決方案可能比自己的解決方案更容易。

Answer 2

你可能已經兩次某處包括jQuery庫。