使用ajax内容重置无限滚动

时间:2014-11-22 15:38:50

标签: jquery ajax infinite-scroll jquery-ias

我正在使用带注释系统的ajax无限滚动。它工作正常,直到用户发布新评论 - 这打破了无限滚动,“加载更多项目”链接仍然存在但单击它时没有任何反应。

我见过这个问题:Reset / disable infinite scroll after AJAX call

我试图实现destroy并绑定到我的success方法,但loadmoreitems链接没有响应。在用户使用下面的代码发布评论后,如何重置无限滚动?

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>

1 个答案:

答案 0 :(得分: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"
});