在AJAX调用后重新初始化jScroll？ （在AJAX加载后仍然加载旧的href）

我正在使用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 ，它将加载/search?query=A&page=3来自旧的href。

显然从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？

Answer 1

我通过注释掉以下行找到了一个临时解决方案：

 // 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调用，因为我希望它能够工作。 如果有人知道重新初始化插件的正确方法，请与我们分享。

更新：我创建了一个正确的jScroll 分支 ，允许它在每个AJAX加载时重新初始化，防止它加载旧的href，使用：

 $('.scroll').jscroll({ refresh: true }); 

希望此function在主版本中合并。

Answer 2

如果您不想修补jScroll，可以清除load （或get ）回调中的jScroll数据：

 var pane = $('#myInfiniteScroll'); pane.load(url, function() { pane.data('jscroll', null); pane.jscroll({ nextSelector: "link[rel='next']", autoTrigger: true, }); }); 

调用jscroll函数时，传递与第一次初始化时相同的参数（在本例中，我定义了两个配置参数，但使用了您需要的参数）。 更好的是，将其分解为自己的function，这样您就不会最终复制代码。