Ajax请求,以同时滚动页面加载内容 [英] Ajax requests to load content while scrolling page
问题描述
我曾尝试和搜查,但没有找到。我怎样才能改变这种状况,我写的关于()方法来工作,下面的方法?
I have tried and searched but didn't find... How can I change the following method that I wrote to work with the on() method?
//Get old posts when scrolling down
$(window).scroll(function(){
if($(window).scrollTop()==($(document).height()-$(window).height())){
//Get older posts
$.ajax({
type: 'POST',
url: 'action/getoldposts.php',
success: function(oldposts){
//Append #postsDiv
$('#postsDiv').append(oldposts);
}
});
}
});
在此先感谢!
Thanks in advance!
丹尼斯
更新1
我改变了code以下内容,但随后被动态创建不具备的功能的东西 - 我错过了一些静态引用
I changed the code to the following, but then things that are created on the fly don't have functionality - am I missing some static reference?
$(window).on('scroll',function(){
if($(window).scrollTop()==($(document).height()-$(window).height())){
//Get older posts
$.ajax({
type: 'POST',
url: 'action/getoldposts.php',
success: function(oldposts){
//Append #postsDiv
$('#postsDiv').append(oldposts);
}
});
}
});
更新2
在创建动态元素错过以下功能:
On the fly created elements miss the following functionality:
$('#postsDiv').on('keydown', '.commenttext', function(e) {
if ((e.which == 13) && !e.shiftKey) {
comment($(this));
return false;
}
});
该方法的评论()看起来如下:
The method comment() looks as follows:
//Function to comment on a post
function comment(commenttext)
{
//Get postid
var commenttextid=commenttext.attr('id');
var postid=commenttextid.replace("commenttext", "");
//Get commenttext
var commenttext=$('#commenttext'+postid).val();
//Ajax of commenttext is not empty
if(commenttext!="")
{
$.ajax({
type: 'POST',
url: 'action/comment.php',
data: 'commenttext='+commenttext+'&postid='+postid,
success: function(data){
//Prepend comments
$('#comments'+postid).hide().prepend(
'<div class="comment"><hr/>'+commenttext.replace( /\n/g, '<br/>' )+'</div'
).fadeIn('slow');
//Remove from textarea what was typed in
$('#commenttext'+postid).val('');
//Focus on textarea
$('#commenttext'+postid).focus();
}
}).error(function(){
alert('The comment could not be sent - please try again later.');
});
}
else
{
//If the commenttext is empty, focus on the textarea nonetheless
$('#commenttext'+postid).focus();
}
}
注释被附加到新加载的内容,但显然错过了阿贾克斯,当我重新加载页面是不存在了。
The comment gets appended to the newly loaded content but apparently missed the ajax as when I reload the page it is not there anymore.
推荐答案
1)我前几天做了一个类似的一块codeA。这里我分配页面滚动事件的函数检查用户多少像素距离的底部。如果用户具有300或更少的像素更少的loadMoreArticles()功能被触发:
1) I've made a similar piece of code a few days ago. Here I assign the page scrolling event to a function which checks how much pixels the user is away from the bottom. If the user has 300 or less pixels less the loadMoreArticles() function is triggered:
$(document).scroll(function(){
if(($(document).height()-$(window).height()-$(document).scrollTop()) < 300){
console.log('Scrolled to bottom');
ArticleList.loadMoreArticles();
} else {
console.log('Scroll '+$(document).height()+' - '+$(window).height()+' - ' +$(document).scrollTop());
}
});
在执行console.log()函数向您展示了它以正确的方式实施
The console.log() functions shows you it's implemented in the right way
2)您可以重新添加的功能,你已经追加新内容之后。像这样的:
2) You can add the functionalities again after you've appended the new content. Like this:
$(window).on('scroll',function(){
if($(window).scrollTop()==($(document).height()-$(window).height())){
//Get older posts
$.ajax({
type: 'POST',
url: 'action/getoldposts.php',
success: function(oldposts){
//Append #postsDiv
$('#postsDiv').append(oldposts);
//Remove all functionalities
$('#postsDiv').off('keydown');
//Add all functionalities again
$('#postsDiv').on('keydown', '.commenttext', function(e) {
if ((e.which == 13) && !e.shiftKey) {
comment($(this));
return false;
}
});
}
});
}
});
这篇关于Ajax请求,以同时滚动页面加载内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!