我正在使用jScroll:
对从AJAX调用返回的搜索结果进行分页$('#search').keyup(function() {
var search = $(this).val();
$.get('/search', {search : search}, function(results) {
$('.scroll-table').html(results);
$('.scroll-table').jscroll();
});
});
进行新搜索后,当我滚动到底部时,jScroll会加载旧搜索的最后一个href的内容。
因此,如果我的旧_nextHref是/search?query=A&page=3
并且我在搜索字段中输入B,而不是从新的href加载/search?query=B&page=2
,它将从旧的href加载/search?query=A&page=3
。< / p>
显然从ajax成功函数调用jscroll()将不会重建它并且_nextHref保持设置为其旧值。我尝试在加载它之前将其销毁,但它会完全阻止它:
$('#search').keyup(function() {
var search = $(this).val();
$('.scroll-table').jscroll.destroy();
$.get('/search', {search : search}, function(results) {
$('.scroll-table').html(results);
$('.scroll-table').jscroll(); /* now jScroll won't load at all */
});
});
请举例说明如何重新初始化jScroll以便加载新的href?
答案 0 :(得分:5)
我通过评论以下行找到了一个临时解决方案:
// if (data && data.initialized) return;
这引起了另一个问题..如果结果列表适合单个页面(不需要分页,因此第一页上没有href,“Loading ...”会显示在列表的底部,因为jScroll想要从服务器到GET "/undefined"
。以下是我修复它的方法:
// Initialization
if (_nextHref != 'undefined') {
$e.data('jscroll', $.extend({}, _data, {initialized: true, waiting: false, nextHref: _nextHref}));
_wrapInnerContent();
_preloadImage();
_setBindings();
} else {
_debug('warn', 'jScroll: nextSelector not found - destroying');
_destroy();
return false;
}
我不知道是否有更好的方法可以做到这一点,但现在它适用于AJAX调用,因为我希望它能够正常工作。如果有人知道重新初始化插件的正确方法,请与我们分享。
更新:我创建了一个proper fork的jScroll,允许它在每个AJAX加载时重新初始化,防止它加载旧的href,使用:
$('.scroll').jscroll({
refresh: true
});
希望此功能在主版本中合并。
答案 1 :(得分:3)
如果您不想修补jScroll,可以清除load
(或get
)回调中的jScroll数据:
var pane = $('#myInfiniteScroll');
pane.load(url, function() {
pane.data('jscroll', null);
pane.jscroll({
nextSelector: "link[rel='next']",
autoTrigger: true,
});
});
当您调用jscroll
函数时,传递与第一次初始化时相同的参数(在本例中,我定义了两个配置参数,但使用了您需要的参数)。更好的是,将其分解为自己的功能,这样就不会最终重复代码。