AJAX pagination refreshes page every other link

Question

In my Rails app I'm using will_paginate and partials to make it so you can click through pages of a list without the page refreshing. This is the JS I use to call the partials and do it all:

$(function () {  
    $('.pagination a').on("click", function () {  
        $.get(this.href, null, null, 'script');  
        return false;  
    });  
});

For some reason, however, it works just fine when I click a link the first time; replaces the partial with an updated one. However after that, I click the next pagination anchor link and the page does a full refresh. Any idea why? My thinking is that this JS only executes when the DOM is initially loaded and so when the partial is replaced with one containing new links they aren't wired up to this code. If this is correct, how would I go about fixing it?

score 0 · Accepted Answer · edited May 23 '17 at 11:57

looks like you might have to use event delegation... the pagination ajax request might be replacing the .pagination a elements also, which means the newly created elements does not have the click handler registered.

So try

$(function () {  
    $(document).on("click", '.pagination a', function () {  
        $.get(this.href, null, null, 'script');  
        return false;  
    });  
});

Event binding on dynamically created elements?

AJAX pagination refreshes page every other link

1 Answers1