在 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，它将不会从新的href中加载/search?query=B&page=2，而是从旧的href中加载/search?query=A&page=3。

显然，在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地址？请注意，不要删除任何HTML标记。

- orszaczky

Answer 1

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

// if (data && data.initialized) return;

这导致了一个进一步的问题。如果结果列表适合单个页面（不需要分页，因此第一页没有 href），则列表底部显示“正在加载...”，因为 jScroll 想要从服务器获取 "/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调用可以按照我的预期工作。如果有人知道重新初始化插件的正确方法，请与我们分享。

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

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

希望这个功能能够合并到主版本中。

- orszaczky

---

感谢您的分支！ - lorenz

如果您觉得它有用，我很高兴 :) - orszaczky

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函数时，请传递与首次初始化时相同的参数（在此示例中，我定义了两个配置参数，但使用您需要的内容）。更好的做法是将其封装成自己的函数，这样就不会重复代码。

- Jimothy

---

我的确切情况并不相同。在页面加载时，我使用AJAX进行了一些懒加载结果，等DOM准备好后再绑定jScroll插件。这很有效，但是当用户添加或更改过滤器时，我需要一种方法来“清除”，加载第一页并重新绑定jScroll。通过使用.data('jscroll'，null)，我成功地做到了这一点。 - Nick Bork

我自己有一个非常不同的场景：https://dev59.com/NKPia4cB1Zd3GeqPw1QE。 - Konstantinos Koletsas