Infinite scroll (Waypoints) with jQuery Mobile, Back button and remote script called twice

Question

I'm building a jQuery Mobile site for future use with PhoneGap, so all my content is loaded via AJAX pulling data from remote PHP/MySQL stuff

In the home page I initially load only first 10 news; then, with a "More..." button, I load next 10, and so on 'til all records are pulled from database

http://www.media-italia.eu/app/index2.html

Clicking on a news and going back with the "Back" button restore the initial state (first 10 items loaded). That's ok, so far so good

Now comes the tricky part: I'd like an "infinite scroll" on my page, so I leveraged jQuery Waypoints plugin, and this is the result:

http://www.media-italia.eu/app/index.html

Everything seems fine, but here comes a strange thing (please ope the console to see)
When I click on a news, then go back and scroll, the PHP page is called twice, resulting in duplicated items

I've tried a few things (including using .off() before .on()), but no luck at all
Really don't know what the problem might be, please can you help?

I also prepared a downloadable script: http://www.media-italia.eu/app/app.rar

Thank you in advance!!!

Answer 1

The solution came from plugin author: I had to destroy and recreate the waypoints, so this:

$('#home .content').waypoint(function(direction) {
    if (direction === 'down'){
        $('#next').trigger('click');
    }
}, { offset: 'bottom-in-view' });

Turn into this:

$('#home .content').waypoint('destroy');
$('#home .content').waypoint(function(direction) {
    if (direction === 'down'){
        $('#next').trigger('click');
    }
}, { offset: 'bottom-in-view' });