通过ajax加载页面后无限滚动插件将不起作用答案

【问题标题】：Infinite scroll plugin wont work after page os loaded via ajax通过ajax加载页面后无限滚动插件将不起作用
【发布时间】：2014-03-23 05:05:26
【问题描述】：

我正在尝试在通过 ajax 加载页面后进行无限滚动。

插件正在第一次加载（非 AJAXED）。但是，如果我通过 ajax 加载页面，则插件停止工作（应该加载的内容，它不是）

我正在使用的无限滚动插件是航点的无限滚动： http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

这是我用来加载页面的 jQuery 代码：

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.


});

我想在我通过 ajax 加载页面后必须有一种方法来绑定和取消绑定无限滚动条，对吧？但是，我不知道该怎么做。如果有人可以帮助我，我将不胜感激。

【问题讨论】：

标签： jquery ajax binding infinite-scroll

【解决方案1】：

我找到了解决办法，

我不得不在点击事件上销毁航点，然后在内容加载完毕后再次添加，最终代码如下：

jQuery(函数() {

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.


});

【讨论】：