Question

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

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

我正在使用的无限滚动插件是航路点＆＃39; infintie卷轴： 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加载页面之后必须有一种绑定和取消绑定无限卷轴的方法，对吧？但是，我不知道该怎么做。如果有人可以帮助我，我会非常感激。

Answer 1

我找到了解决方案，

我不得不在点击事件中销毁路点，然后在加载内容后再次添加它，最终代码如下所示：

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.


});

通过ajax加载页面后，无限滚动插件将无法工作

1 个答案: