Простая разбивка на 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

Вы используете load() метод JQuery для вставки содержимого, которое является аббревиатурой для $.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); 
      }); 
     }); 
    }); 
}); 

Answer 2

Я использовал решение adeneo, в с парой мелких изменений.

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 
       ); 
      } 
     ); 
    }); 
});