Infinite scroll plugin wont work after page os loaded via ajax

Question

I am trying to make infinite scroll work after a page is loaded via ajax.

The plugin is working on the first load (NOT AJAXED). However, if I load the page via ajax, the pluging stops working (the content that is supposed to be loaded, it's not)

The infinite scroll plugin I am working with is waypoints' infintie scroll: http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

And this is the jQuery code I am using to load the pages:

jQuery(function() {

    if(Modernizr.history){

    var newHash        = "",
        mainContent    = jQuery("#preContent"),
        pageWrap       = jQuery("#main"),
        is_ajaxed_page = "",
        everPushed     = false, 
        el;


    jQuery(".ajax-load").delegate("a", "click", function() {
        _link = jQuery(this).attr("href");
        history.pushState(null, null, _link);
        everPushed = true;
        loadContent(_link);
        return false;
    });

    function loadContent(href){
        jQuery(mainContent)
                .find("#content")
                .fadeOut(200, function() {
                    jQuery(mainContent).hide().load(href + " #content", { is_ajaxed_page: "yes" }, function() {
                        jQuery(mainContent).fadeIn(200, function() {

                        });
                    });
                });
    }

    jQuery(window).bind('popstate', function(){
       _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
       if (everPushed) {
           loadContent(_link);
       }
       everPushed = true;
    });

} // otherwise, history is not supported, so nothing fancy here.


});

I guess there has to be a way to bind and unbind the infinite scroller after I load the page via ajax, right? However, I dont know how to do that. If someone can help me, I would really appreciate it.

Answer 1

I found the solution,

I had to destroy the waypoint on the click event and then add it again when the content has been loaded, the final code looks like this:

jQuery(function() {

if(Modernizr.history){

var newHash        = "",
    mainContent    = jQuery("#preContent"),
    pageWrap       = jQuery("#main"),
    is_ajaxed_page = "",
    everPushed     = false, 
    el;


jQuery(".ajax-load").delegate("a", "click", function() {
    _link = jQuery(this).attr("href");
    history.pushState(null, null, _link);
    everPushed = true;
    jQuery(mainContent).waypoint("destroy"); //***DESTROY all waypoints 
                                         //attached to the container
    loadContent(_link);
    return false;
});

function loadContent(href){
    jQuery(mainContent)
            .find("#content")
            .fadeOut(200, function() {
                jQuery(mainContent).hide().load(href + " #content", { is_ajaxed_page: "yes" }, function() {
                    jQuery(mainContent).fadeIn(200, function() {
                        infscroll(); //***FUNCTION the initiate infinite scroll
                    });
                });
            });
}

jQuery(window).bind('popstate', function(){
   _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
   if (everPushed) {
       loadContent(_link);
   }
   everPushed = true;
});

} // otherwise, history is not supported, so nothing fancy here.


});