重置无限滚动以显示通过AJAX检索到的新结果

Question

我有一个过滤器表单，该表单在更改时会用来自数据库的新过滤结果填充容器div（#results）。 但是在更改过滤器之后， Infinite Ajax Scroll插件会在第二页中显示第一个搜索的结果。 在更改事件中，我需要完全重置旧结果并仅显示新结果。 我尝试了许多解决方案，但是什么也没做。 我知道有这样做的方法 ，但是我不明白如何在我的代码中使用它们（检查注释）。

    // Form select inputs: on change call the filter
    $("select").on("change", function() {
       setTimeout(function() { 
         ias.destroy(); 
       }, 1000);
       ias.bind();
       filter();
    });

    // Filter: Ajax call that returns new results by a SQL query to the DB
    var filter = function() {
      var formData = form.serializeObject();
      $.ajax({
        url: "/libs/filterData.php",
        type: "POST",
        data: JSON.stringify(formData),
        cache: false,
        success: function(results) {
          $("#results").html(results);
        }
      });
    };

    // IAS configuration
    //var initializeIas = function() {
      var ias = jQuery.ias({
        container: "#results",
        item: ".result",
        pagination: ".page-nav",
        next: ".page-nav a"
      });
    //};

//initializeIas();

也尝试过此解决方案，但不起作用。

这里有类似的问题。

Answer 1

尝试在succes-handler中重新初始化IAS：

// Filter: Ajax call that returns new results by a SQL query to the DB
var filter = function() {
  var formData = form.serializeObject();
  $.ajax({
    url: "/libs/filterData.php",
    type: "POST",
    data: JSON.stringify(formData),
    cache: false,
    success: function(results) {
      ias.destroy(); 
      $("#results").html(results);
      ias.bind();
    }
  });
};

// IAS configuration
var ias = jQuery.ias({
      container: "#results",
      item: ".result",
      pagination: ".page-nav",
      next: ".page-nav a"
  });