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

Question

我正在使用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,而不是/search?query=B&page=2从新的href 加载,它将/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
}); 

希望此功能在主版本中合并.