3

我已经尝试并搜索但没有找到...如何更改我编写的以下方法以使用 on() 方法？

//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);
        }
    });
  } 
});

提前致谢！

丹尼斯

更新 1

我将代码更改为以下内容，但是动态创建的东西没有功能-我是否缺少一些静态引用？

$(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

动态创建的元素缺少以下功能：

$('#postsDiv').on('keydown', '.commenttext', function(e) {
    if ((e.which == 13) && !e.shiftKey) {
        comment($(this));
        return false;
    }
});

方法 comment() 如下所示：

//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();
}
}

评论被附加到新加载的内容中，但显然错过了 ajax，因为当我重新加载页面时它不再存在。

4

2 回答 2

5

1）几天前我做了一段类似的代码。在这里，我将页面滚动事件分配给一个检查用户距离底部多少像素的函数。如果用户的像素少于或等于 300，则触发 loadMoreArticles() 函数：

$(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() 函数显示它以正确的方式实现

2）您可以在添加新内容后再次添加功能。像这样：

$(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;
                }
            });
        }
    });
  } 
});
于 2012-05-05T22:50:42.290 回答
-3 
$(window).on('scroll', function(){ 
// ...
});
于 2012-05-05T22:47:55.653 回答