重置无限滚动显示通过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

尝试在success -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"
  });