Reputation: 1755
I'm using ajax-based pagination, heres the markup
<div id="portfolio-thumbs">
<ul id="portfolio-destaque">
HERE GOES MY LOOP AND CONTENT , some LI's with thumbs and stuff
</ul>
</div>
<div id="pagi-container">
<div id="paginar">
<?php posts_nav_link(); ?>
</div>
</div>
the <?php posts_nav_link(); ?>
rendered looks like this:
<div id="pagi-container">
<div id="paginar">
<a href="http://localhost/paulo/page/2/" >next Page »</a>
</div>
</div>
then, i use this jquery to load the pagination links:
$('#paginar > a').on('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#portfolio-thumbs').html('Loading...');
jQuery('#portfolio-thumbs').load(link+' #portfolio-destaque');
jQuery('#pagi-container').load(link+' #paginar');
});
When I click Next Page link, it loads the content inside #portfolio-thumbs
with the markup ok, the only difference is the #pagi-container
that loads this:
<div id="pagi-container">
<div id="paginar">
<a href="http://localhost/paulo/">« Prev Page</a> —
<a href="http://localhost/paulo/page/3/">Next Page »</a>
</div>
</div>
At this point, Jquery does not work anymore. If I click any pagination link it loads the full page.... In the next page, where it loads only 1 pagination link, it works ok.
My guess is that, somehow, my jquery is only working with 1 #paginar a
, breaking when there's more than 1 link.... but I'm not sure... anyone have any idea?
Upvotes: 0
Views: 580
Reputation: 6061
it's because you're changing the contents of #paginar
, so what happens is the event on the links are getting cleared. depending on your jquery version, you can either use .live()
or add the event to the #pagi-container
instead:
$('#pagi-container').on('click','#paginar > a',function() {... }
Upvotes: 3