jQuery ajax로드 문제

Question

jQuery .LOAD 메소드를 사용하여 모든 웹 사이트 페이지를로드하려고합니다. 그래서 내 웹 사이트의 모습은 다음과 같습니다.

<script type="text/javascript">  
  $(function() {
    $('.link').bind('click', function(e) {
            var page = $(this).attr('href');
            $('#site').addClass('loading');
            $('#content').load(page, function (){
            $('#site').removeClass('loading');
    });

    e.preventDefault();
    return false;
  });

<a href="test.php" class="link">Test</a>

이 코드를 사용하면 클래스 = "링크"를 가져 오는 모든 링크가 div #content에 내 페이지를로드합니다. 잘 작동합니다! 문제가 없지만 test.php를로드 할 때 링크 나 버튼 또는 버튼에서 클래스 = "링크"를 사용하면 작동하지 않으며 새 페이지가 #Content 외부에로드됩니다.

이미 이것을 새로드 파일에 복사하려고 시도했지만 작동하지 않습니다. 누구든지 힌트를 얻었습니까?

감사

Answer 1

이벤트를 묶을 때는 그 당시 DOM에있는 요소에만 이벤트를 묶기 때문입니다. 따라서 나중에 새로운 것을 추가하면 이전에 첨부 한 이벤트에 묶이지 않습니다. jQuery 1.3이 있다고 가정하면이를 주변에 올리는 기능이 내장되어 있습니다. live. 그것으로, 당신은 모든 현재와 미래의 요소에 이벤트를 바인딩 할 수 있습니다. 모든 이벤트를 지원하는 것은 아니지만 click 지원합니다.

따라서 그것을 염두에두고, 당신은 이것을 교체하면됩니다.

$('.link').bind('click', function(e) {

이것으로 :

$('a.link').live('click', function(e) {

(가능한 경우 태그를 지정하는 것이 훨씬 효율적이기 때문에 a.를 선택기에 추가했습니다)

jQuery 1.3이없는 경우 가능한 빨리 업그레이드해야합니다. 당신이 할 수 없다면, 라이브 퀴리 같은 것을 달성하지만 훨씬 덜 우아한 방식으로 플러그인. 또는 새로운 데이터를로드 할 때마다 동작을 바인딩하고 호출 할 수있는 기능을 가질 수 있습니다. 그러나 모든 것을 고려하지만 JQuery 's live 이 작업을 수행하는 가장 좋은 방법입니다.