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

我正在使用以下内容对AJAX调用返回的搜索结果进行分页：

在进行新搜索后，当我滚动到底部时，jScroll将加载旧搜索的最后一个href的内容

因此，如果我的旧_nextHref是

/search？query=A&page=3

，我在搜索字段中输入B，而不是从新href加载

/search？query=B&page=2

，它将从旧href加载

/search？query=A&page=3

显然，从ajax success函数调用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吗？

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

// 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
}); 

---

希望此功能能合并到主版本中。

如果不想修补jScroll，可以在

加载

（或

获取

）回调中清除jScroll数据：

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

---

调用

jscroll

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

感谢这个fork！如果您发现它有用，我很高兴：）我的具体情况不一样。在页面加载时，我在dom准备就绪后使用AJAX延迟加载一些结果，然后绑定jScroll插件。它工作得很好，除了当用户添加或更改过滤器时，我需要一种开始“清理”的方法，加载第一页并重新绑定JSCROL。通过使用.data（'jscroll'，null），我成功地做到了这一点。

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