2013-04-22 1 views
0

http://html5.gingerhost.com/에서 데모를 다시 만들려고 할 때 몇 가지 문제가 발생했습니다. 내 페이지에서jQuery pushState로드 내용이 다른 URL

클릭 할 때 트리거 = "인덱스"> A HREF <이 : 나는 가능한 한 명확 상황을 설명하려고합니다

  • URL 표시 줄을 변경하는 pushState 이벤트 mysite.tld/인덱스
  • = "인덱스">

사용자의 클릭 일 임의의 URL을로드하고 현재 < 대신 href가 그것을 넣어해서 getJSON 호출로 브라우저의 임의의 URL을로드하면 pushState 이벤트가 발생하지 않고 브라우저가 임의의 url을 따라 가며 ... 원하는 결과가 아닙니다. 계속 pushState 이벤트를 트리거하고 무작위 URL을 계속로드하려고합니다. 이 같은

뭔가 : (. 그것은 실제 페이지를로드 여기 나누기)

  • CLICK INDEX2

    • CLICK 색인
      • 로드 INDEX2 및 교체 INDEX
        • 로드 INDEX3 REPLACE INDEX2 (도착 예정)
        • 내가 분명하지 않다 경우

나는 죄송합니다. jQuery 기술에 대한 자신감이 부족합니다.

의견이 있으십니까?

$('a').click(function(e) { … 

만 DOM에있는 a 요소에서 작동하기 때문에

<!DOCTYPE html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('a').click(function(e) { 
      href = $(this).attr("href"); 

      loadContent(href); 

      history.pushState('', 'New URL: '+href, href); 
      e.preventDefault(); 
     }); 
    }); 

    function loadContent(url){ 
     $.getJSON("load.php", {pid: url}, function(json) { 
      $.each(json, function(key, value){ 
       $(key).html(value); 
      }); 
     });   
    } 
</script> 
</head> 

<body> 
    <div> 
     <a href="index">Go to: index</a> 
    </div> 
    <p></p> 
</body> 
</html> 

load.php

<?php $i = rand(0,10); ?> 
{ 
"div":"<a href='<?php echo $_GET['pid'].$i; ?>'>Go to: <?php echo $_GET['pid'].$i; ?></a>", 
"p":"This is the page for <?php echo $_GET['pid']; ?>" 
} 

답변

1

입니다 : 여기

는 소스 코드 이 줄의 실행 시점에 나중에 다른 a 요소로 바꿉니다.

대신 .on을 사용하십시오. 이렇게 :

$(document).on("click", "a", function(e) { … 
+0

감사합니다! 이 작품! –

관련 문제