user1576978
user1576978

Reputation: 1755

Ajax pagination works only first and third times

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 &raquo;</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

Answers (1)

kennypu
kennypu

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

Related Questions