데이터를 두 번 반환하는 onpopstate

Question

나는 onpopstate로 놀기 시작했으나 문제가 발생했습니다. 내 브라우저에서 뒤로 버튼을 클릭 할 때마다 URL이 적절하게 변경되지만 페이지 코드가 두 번로드되어 두 개의 목록과 두 개의 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 라이브러리를 포함했을 수도 있습니다.