Question

所以我有这样的情况，我想在点击的链接上重新绑定无限滚动插件并传递新的URL以区别稍后将由它生成的内容部分..

到目前为止，我能做的是触发无限滚动并在第一个单击的链接上传递该部分..之后当我点击另一个链接时，URL链接或该部分将不会被重新绑定，我希望它被重新绑定所以它可以改变生成的内容。

这里是我的代码..

HTML

<li class="active"><a href="#" title="" data-filter=".w-all" class="w-filter">View All</a></li>
        <li><a href="#" title="" data-filter=".w-branding" class="w-filter">Branding</a></li>
        <li><a href="#" title="" data-filter=".w-graphic" class="w-filter">Graphic</a></li>
        <li><a href="#" title="" data-filter=".w-website" class="w-filter">Website</a></li>
        <li><a href="#" title="" data-filter=".w-photography" class="w-filter">Photography</a></li>

的jQuery

$('a.w-filter').click(function(e){
    var selector = $(this).attr('data-filter');
    var section = selector.split('-');
    $('#page_nav a').attr('href', 'pager/1/'+section[1]);


    $(window).unbind('.infscr');

    $container.infinitescroll({  
        navSelector : '#page_nav',
        nextSelector : '#page_nav a',
        itemSelector : '.item',
        loading: {      
            finishedMsg: 'Hmm, I guess that\'s all we got.',    
            img: 'loading.gif',    
            msgText: '<em>Loading more projects.</em>'   
        },
        pathParse: function (path, currentPage) {
          var chunkedUrl = ['/pager/', '/'+section[1]];
          return chunkedUrl;
        }


    });

    $container.infinitescroll('retrieve');


    e.preventDefault();
});

可以吗？

Answer 1

最后，我找到了Infinite scroll plugin modify the path with custom query

的答案

它必须将插件源修改为lil bit，之后它就像魅力一样！

//line 67
$.infinitescroll.prototype = {
   //My custom parameters
    pageType: "&type=items",
    categoryParam: "&category=shoes",
    /*  
        ----------------------------
        Private methods
        ----------------------------
        */

感谢老兄..

我发现了一些有关此问题的问题..因此当任何部分返回0结果时，插件将调用＆＃39;结束＆＃39;破坏实例的函数，稍后当我点击任何链接时，插件将不再触发该事件。我试图使用其绑定＆＃39;重新绑定实例。功能但没有运气，它的回收＆＃39;函数只调用完成的消息文本上一个实例的最后一个状态，然后它被销毁。我仍然无法重新绑定新的实例..

这只是我做的另类，n还需要修改插件源.. 它不会打电话给'结束'＆＃39;在一个部分返回0结果时起作用，但插件不再显示已完成的短信。

// near line 356, put comments tag before if(children.length === 0) to its closing brackets

// if it didn't return anything
/*if (children.length === 0) {
    return this._error('end');
}*/

// use a documentFragment because it works when content is going into a table or UL
frag = document.createDocumentFragment();

仍然希望有人可以帮助以正确的方式解决这个问题。

Answer 2

试试$container.infinitescroll('destroy')。如果您正在使用2.0 version from github，它应该可以正常工作（至少这是我通过查看源代码可以看到的内容）。

在点击时使用新的URL链接重新绑定infinitescroll插件

2 个答案: