jQuery pagination with WordPress

Question

I am trying to get jQuery to load WordPress pagination when the pagination is outside the targeted div (class="blog-roll")

This function works when pagination is inside the div (class="blog-roll") but as soon as I pull it out the jQuery stops working and I get page jump when I use the pagination.

Here is my code...

<div class="blog-roll">
     <wp_query set to global>
</div>

<div class="pagination">
   <wp pagination>
</div>

<script>
 jQuery(function($) {
   $('.blog-roll').on('click', '.pagination a', function(e){
   e.preventDefault();
    var link = $(this).attr('href');
   $('.blog-roll').fadeOut(200, function(){
   $(this).load(link + ' .blog-roll', function() {
   $(this).fadeIn(200);
        });
      });
    });
   });
 </script>

I think that it has something to do with $(this) but even when I change it to $(".blog") it still doesn't work. The script looks like it should work because it is targeting the right items. Anyways any help would be greatly appreciated.

Answer 1

How about this. My pagination is also outside the content div so I load that too so that the current page number gets updated.

<div class="blog">    
    <div class="blog-roll">
         <wp_query set to global>
    </div>

    <div class="pagination">
       <wp pagination>
    </div>
</div>

<script>
    $('.blog').on('click', '.pagination a', function(e){
        e.preventDefault();
        var link = $(this).attr('href');
        $('.pagination').load(link + ' .pagination'); //load and update your pagination as well since its outside blog-roll
        $('.blog-roll').animate({ opacity: 0.1 },500, function(){ //opacity prevents page jump
            $(this).load(link + ' .blog-roll', function() {
                $(this).animate({ opacity: 1 },500);
                $("html, body").animate({  
                        scrollTop: $(this).offset().top - 300 }, 400); //I added this in my code since I have pagination at the bottom of 20 posts
            });
        });
    });
</script>

DEMO