単純なWordpress AJAXページ設定

Question

私は次のページセットでロードするためにループ+ jQueryを使用しています。最初のクリックでは動作しますが、次のページがロードされて「新しい投稿」をクリックするとページ全体をリロードします。何か案は？

<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

もちろん、動的にコンテンツを挿入し$.ajaxためのショートカット、あるコンテンツを挿入するためのjQueryのload()方法を、使用しています。

ダイナミックコンテンツが動的でない親にイベントの委任を必要とし、何か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コールを1つ作成し、返されたデータをフィルタリングして目的の要素を取得および更新しました。
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 
       ); 
      } 
     ); 
    }); 
});