jquery ajax 클릭시 전화, 단 한번만 작동합니다.

이 간단한 jquery 코드가 있습니다. 클릭하면 태그의 URL이 표시되고 현재 콘텐츠 옆에 페이지가로드되고 슬라이드되어 이전 콘텐츠가 삭제됩니다. 페이지의 상태는 이전과 완전히 같으며, 동일한 요소에는 추가 클래스 나 스타일이 없습니다. 문제는 다음 ajax 호출이 작동하지 않는다는 것입니다. 어쩌면 .unbind() 할 필요가 있을까요?jquery ajax 클릭시 전화, 단 한번만 작동합니다.

저는 jquery와 javascript에 익숙하지 않아서 매우 분실했습니다. 도와 주셔서 감사합니다 많이 :)

<script type="text/javascript"> 
    $(document).ready(function(){ 
     loadPage(); 
    }); 
    function loadPage(url) { 
     if (url == undefined) { 
      $('body').load('index.html header:first,#content,footer', hijackLinks); 
     } else { 
      $.get(url , function(data) { 
       $('body').append(data); 
       $('body>meta').remove(); 
       $('body>link').remove(); 
       $('body>title').remove(); 
       $('body').append(direction); 
       sm = $(window).width(); 
       if(direction == "leftnav"){ 
        $('body>header:last,body>#content:last,footer:last').css("left", "-" + sm + "px"); 
        footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true) ; 
        $('footer:last').css("top", footerheight); 
        $('body>header,body>#content,footer').css("-webkit-transition-duration","0.5s") 
        $('body>header,body>#content,footer').css("-webkit-transform","translate(" + sm + "px,0px)"); 
       }; 
       if(direction != "leftnav"){ 
        $('body>header:last,body>#content:last,footer:last').css("left", sm + "px"); 
        footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true) ; 
        $('footer:last').css("top", footerheight); 
        $('body>header,body>#content,footer').css("-webkit-transition-duration","0.5s") 
        $('body>header,body>#content,footer').css("-webkit-transform","translate(-" + sm + "px,0px)"); 
       }; 
       setTimeout(function(){ 
        $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last)').remove() 
       },500); 
       setTimeout(function() { 
        $('body>header,body>footer,body>#content').removeAttr('style') 
       },500); 
      }); 
     } 
    } 
    function hijackLinks() { 
     $('a').click(function(e){ 
      e.preventDefault(); 
      loadPage(e.target.href); 
     direction = $(this).attr('class'); 
     }); 
    } 
</script>

출처

2011-03-18 cmplieger

당신이 당신의 body 이벤트 핸들러가 대부분 유지하지 않을됩니다의 내용을 대체 콘텐츠 dynmically를로드하기 때문에.

중 하나 live() 또는 '에서'포스트 2013을 읽는 사람을위한

$('a').live("click", function(e){ 
    e.preventDefault(); 
    loadPage(e.target.href); 
    direction = $(this).attr('class'); 

});

출처

2011-03-18 01:57:16

감사합니다. 놀랍지 만, 나는 살았다. 그러나 나는 그것을 이상하게 일하게하지 않았다. 이 awsome입니다 :) 다시 한 번 – cmplieger

아무 문제 없어, 다행스럽게 도울 수있어. –

delegate()은 지금 '라이브'감가 상각 된 수행하는 새로운 방법입니다 (사용 당신이 당신의 클릭 핸들러를 조정해야이 문제를 해결하려면 예 : wordpress 페이지 매김의 예 :

.live() 함수는 감가 상각되었으므로 대신 .on()을 사용하십시오. 분명히 jQuery 라이브러리도 필요하다.

출처

2013-04-09 00:48:37 timhc22

jquery ajax 클릭시 전화, 단 한번만 작동합니다.

답변

관련 문제