JScroll: Change nextHref after ajax changed tab and URI

Question

JScroll can't see when the javascript changed window history with pushState .

I added JScroll for posts on index page. The default URL is localhost for example. And when there is no path after, the default posts will be loaded and jscroll will work as it should have.

But I have tabs on index page (new, top, hot), which change order of posts. So when I click on a tab, it dynamically changes URL with window.history.pushState , and sends request with new filter for showing posts.

But in JScroll, it still leaves old href and loads old data. For example - I am scrolling on localhost/new , and when I change tab to localhost/top in JScroll nextHref is "http://localhost:8000/new?page=3 div.infinite-scroll" instead of "http://localhost:8000/top?page=1 div.infinite-scroll" .

How can I change it so it is synced with tabs?

Answer 1

I found a solution.

After each change of tab I added
$('.infinite-scroll').removeData('jscroll').jscroll.destroy(); and called JScroll initializer again.