Simple Wordpress AJAX sayfa numaralandırma

Question

Sonraki sayfa kümesine yüklemek için aşağıdaki +jQuery döngüsünü kullanıyorum ve ilk tıklamayla çalışıyor, ancak bir sonraki sayfa yüklendiğinde ve "daha yeni gönderiler" i tıklıyorum tüm sayfayı yeniden yükler. Herhangi bir fikir? Elbette dinamik içeriği ekler $.ajax için bir kısayol, hangi içerik eklemek jQuery'nin load() yöntemi kullanıyorsanız

<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

.

Dinamik içerik olmayan bir dinamik ebeveyne olayların heyeti gerektirir şey jQuery Ben ufak tefek ayarlamalarla bir çift, adeneo en çözümünü kullanılan 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

ile kolaylaştırır.

1. Benim sayfalandırma ben yüklemek istedim kabın dışına, bu yüzden sayfalandırma içeriği için ayrı bir arama yapılır. Yorumlara göre, tek bir Ajax çağrısı yapmak için kodu güncelledim, istenen öğeleri almak ve güncellemek için döndürülen veriyi filtreliyorum.
2. Sayfalama, geçerli sayfa için bile tüm bağlantılardan oluşuyordu. Tıklanan öğenin etkin sayfa olması durumunda Ajax isteği yapmanın hiçbir anlamı yoktu, bu nedenle üst liste öğesi öğesi .disabled sınıfına sahip olmayan yalnızca sayfalandırma bağlantılarını hedeflemek için mantık ekledim.
3. Yeni içerik yüklediğimde sayfa fadeOut/In kullanıyor olmasından dolayı sayfa zıplıyordu (opacity animasyonu tamamlandığında display: none;'u ayarlar). Bunun yerine, yükseklik dalgalanmasının miktarını sınırlayan opaklığı manuel olarak canlandırıyorum.
İşte

güncellenen kod:

$('#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 
       ); 
      } 
     ); 
    }); 
});