간단한 Wordpress AJAX 페이지 매김

Question

아래의 루프를 사용하여 다음 페이지 세트를로드하고 첫 번째 클릭에서 작동하지만 다음 페이지가로드되고 "새로운 게시물"을 클릭하면 작동합니다 전체 페이지를 다시로드합니다. 어떤 아이디어? 당신은 물론 동적으로 컨텐츠를 삽입 $.ajax에 대한 바로 가기가 인 내용을 삽입하는 jQuery의 load() 방법을 사용하고

<div id="content"> 
    <?php 
$new_query = new WP_Query(); 
$new_query->query('post_type=post&showposts=1'.'&paged='.$paged); 
?> 

<?php while ($new_query->have_posts()) : $new_query->the_post(); ?> 
<?php the_title(); ?> 

<?php endwhile; ?> 
    <div id="pagination"> 
    <?php next_posts_link('&laquo; Older Entries', $new_query->max_num_pages) ?> 
    <?php previous_posts_link('Newer Entries &raquo;') ?> 
    </div> 
</div><!-- #content --> 

<script> 
$('#pagination a').on('click', function(event){ 
event.preventDefault(); 
var link = $(this).attr('href'); //Get the href attribute 
$('#content').fadeOut(500, function(){ });//fade out the content area 
$('#content').load(link + ' #content', function() { }); 
$('#content').fadeIn(500, function(){ });//fade in the content area 

}); 
</script> 

Answer 1

.

동적 컨텐츠가 아닌 동적 인 부모를 이벤트의 위임을 요구, 뭔가 jQuery를 내가 사소한 조작의 부부와 함께, adeneo의 솔루션을 사용 on()

jQuery(function($) { 
    $('#content').on('click', '#pagination a', function(e){ 
     e.preventDefault(); 
     var link = $(this).attr('href'); 
     $('#content').fadeOut(500, function(){ 
      $(this).load(link + ' #content', function() { 
       $(this).fadeIn(500); 
      }); 
     }); 
    }); 
}); 

Answer 2

으로 쉽습니다.

1. 내 매김 내가 을로드하고 싶어 용기의 외부, 그래서 나는 매김 내용 에 대한 별도의 호출을 수행 하였다. 의견에 따라 코드를 업데이트하여 반환 된 데이터를 필터링하여 원하는 요소를 검색하고 업데이트하는 단일 Ajax 호출을 작성했습니다.
2. 내 페이지 매김은 현재 페이지에서도 모든 링크로 구성됩니다. 클릭 된 요소가 활성 페이지 인 경우 Ajax 요청을 수행 할 필요가 없으므로 부모 목록 항목 요소에 .disabled 클래스가없는 페이지 링크 만 대상으로하는 로직을 추가했습니다.
3. fadeOut/In (불투명도 애니메이션이 완료되면 display: none;을 설정 함)을 사용 했으므로 새 콘텐츠를로드 할 때마다 페이지가 점프되었습니다. 대신 수동으로 불투명도를 애니메이션으로 적용하여 높이 변동을 제한합니다.
여기

는 업데이트 된 코드입니다 :

$('#content').on('click', '#pagination :not(.disabled) a', function(e){ 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $.post(link, function(data) { 
     var content = $(data).filter('#content'); 
     var pagination = $(data).filter('#pagination'); 
     $('#pagination').html(pagination.html()); 
     $('#content').animate(
      {opacity: 0}, 
      500, 
      function(){ 
       $(this).html(content.html()).animate(
        {opacity: 1}, 
        500 
       ); 
      } 
     ); 
    }); 
});