使用 AJAX 内容重置无限滚动

Question

我正在使用带有注释系统的ajax无限滚动。 在用户发布新评论之前，它可以正常工作 - 这会破坏无限滚动，"加载更多项目"链接仍然存在，但当您单击它时没有任何反应。

我见过这个问题：AJAX调用后重置/禁用无限滚动

我试图实现销毁并绑定到我的成功方法中，但加载更多项目链接没有响应。 用户使用以下代码发表评论后，如何重置无限滚动？

阿贾克斯：

<script>
$(document).ready(function(){
$('#commentform').on('submit',function(e) {
$.ajax({
    url:'ajaxrequest.php',
    data:$(this).serialize(),
    type:'POST',
    dataType: 'HTML',
    success:function(data, response){
ias.destroy(); 
$("#posts").fadeOut(300);       
$('#posts').html(data)
$("#posts").fadeIn(500);
$('html, body').animate({ scrollTop: $('#posts').offset().top - 100 }, 'fast');
ias.bind(); 
 jQuery.ias({
  container: "#posts",
  item: ".post",
  pagination: "#pagination",
  next: ".next a"
});
    },
    error:function(data){
        $("#error").show().fadeOut(5000);
    }
    });
e.preventDefault();
return false;
});
});
</script>

Answer 1

在加载时初始化滚动时，请确保已将其存储在名为 ias 的变量中。像这样的东西

var ias = jQuery.ias({
  container: "#posts",
  item: ".post",
  pagination: "#pagination",
  next: ".next a"
});

在成功方法中，只需调用ias.destroy();和ias.bind();方法，就像您以前所做的那样。

删除在代码中再次完成的初始化，即

jQuery.ias({
  container: "#posts",
  item: ".post",
  pagination: "#pagination",
  next: ".next a"
});