Simple Wordpress AJAX 페이지 번호부여부

Simple Wordpress AJAX 페이지 번호부여부

아래 루프 + jQuery를 사용하여 다음 페이지 세트를 로드하고 있습니다.첫 번째 클릭으로 동작하지만 다음 페이지가 로드되고 "newer posts"를 클릭하면 페이지 전체가 새로고침됩니다.좋은 생각 있어요?

<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>

jQuery's를 사용하고 있습니다.load()내용을 삽입하는 방법, 바로 가기입니다.$.ajax물론 콘텐츠를 동적으로 삽입합니다.

동적 콘텐츠에서는 이벤트를 비동적 부모에게 위임해야 합니다. jQuery는 이를 통해 이벤트를 쉽게 수행할 수 있습니다.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);
            });
        });
    });
});

아데노의 솔루션을 사용했는데 몇 가지 사소한 수정을 가했어요

1. 페이지 수가 로드하려는 컨테이너 외부에 있습니다. 그 때문에, 페이지 번호의 컨텐츠에 대해서, 다른 콜을 실시했습니다. 코멘트에 의하면, Ajax 콜을 1회 발신하도록 코드를 갱신해, 반환된 데이터에 근거해 필터링 해, 필요한 요소를 취득해 갱신했습니다.
2. 나의 페이지 번호부여는 현재 페이지에서도 모든 링크로 구성되어 있었다.클릭된 요소가 활성 페이지일 경우 Ajax 요청을 수행하는 것은 의미가 없습니다. 그래서 나는 부모 목록 항목 요소가 없는 페이지 연결 링크만 대상으로 하는 논리를 추가했습니다..disabled학급.
3. 페이드아웃/인(설정)을 사용하고 있었기 때문에 새로운 콘텐츠를 로드할 때마다 페이지가 점프했습니다.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
                );
            }
        );
    });
});

언급URL : https://stackoverflow.com/questions/15983244/simple-wordpress-ajax-pagination