onpopstateをいじり始めましたが、問題が発生しました。ブラウザの[戻る]ボタンをクリックすると、それに応じてURLが変更されますが、ページコードが2回読み込まれるため、2つのリストと2つのdivが表示されます。なぜ2倍のコードが生成されるのですか？どうすれば修正できますか？サンプルコードは以下のとおりです。
<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>
これは、視覚的に何が起こるかについて私が撮ったスクリーンショットへのリンクです。最初の画像は、最初に画面を読み込んだときのものです。2番目の画像は、ボタン1を押したときに発生する画像です。3番目の画像は、ブラウザをクリックして戻ったときに発生する画像です。