【发布时间】:2013-06-11 05:28:04
【问题描述】:
我正在尝试设置一个显示更多按钮来启动无限滚动。单击按钮后,它应该无限滚动直到结束。
function infiniteScroll() {
var postHolder = document.getElementById('postHolder');
var articleCount = postHolder.getElementsByTagName('article').length + 1;
$.ajax({
url: "/handlers/InfiniteScroll.ashx?page=" + articleCount + "",
contentType: "text/html; charset=utf-8",
dataType: "html",
success: function (data) {
if (data != "") {
$('.posts-holder .article:last').after(data);
}
}
});
};
$("#showMore").click(function () {
infiniteScroll();
$(window).scroll(function () {
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.95;
if (((wintop / (docheight - winheight)) > scrolltrigger) && test == 1) {
infiniteScroll();
}
});
$('#showMore').hide();
});
但由于某些原因,这段代码的 ajax 成功函数被调用了两次,结果被附加了两次。我做错了什么还是有更好的方法来设置它?
【问题讨论】:
-
#showMore是锚标签吗?单击它会导致窗口滚动到顶部,从而导致窗口滚动事件并执行infiniteScroll()? -
它只是一个输入标签。谢谢
-
-
如果页面一直滚动到底部并且你隐藏了
#showMore按钮,就会发生滚动事件。在绑定滚动事件之前隐藏按钮。 -
我试过了,但运气不好。似乎处理程序只被调用一次,但成功函数被调用了两次。
标签: javascript jquery ajax infinite-scroll