2

我正在使用最新版本的 PhoneGap、jQM 和 jQuery 1.8.0 构建应用程序。到目前为止一切顺利，除了我遇到的这个小而​​烦人的问题。

我的 show.html 从包含以下代码的 index.html 链接：

<div id="search"> contains search bar and submit button </div>
<div id="list" style="display:none;"> 
      <ul data-role="listview" data-filter="true"> </ul>
</div>

ul 标记为空，因为单击提交按钮时列表将使用 ajax 动态附加到它。一开始我不想显示#list div，所以我将显示设置为无。

所以这很好用，当点击提交按钮时，它会向服务器发送一个 ajax 请求并将项目附加到列表中。它还将隐藏搜索 div。这也可以！

现在问题来了，我添加了一个 window.scroll 函数来检测何时到达页面底部。

这是我的 jQuery 代码：

$(document).on("pageshow", "#pageID", function() {
    $("#submit").click(function() {
        $.ajax({
                success: function(data, status){
                  $('#search').hide();
                  $('#list').show();
                //append to list div and refresh list here
                }
        });
    });
    //detects bottom of page
    $(window).scroll(function () {
        if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height()))) {       
            console.log('end of the page');
                        lastPostFunc(); //infinite scroll function
        } 
    });  
});

这会在萤火虫控制台上打印两次“页面结尾”！此脚本存在于 head 标签之间。

反正有没有让它打印一次？我需要这个，因为我实现了自己的无限滚动功能，问题是导致我的 ajax 请求两次发布到服务器。该函数运行良好，但不是问题的原因，因为即使我将 lastPostFunc() 注释掉，它仍然会打印到控制台两次！

编辑：就个人而言，我不认为到目前为止给出的答案是错误的，它们是正确的，但它们并不能帮助我解决问题。也许我需要更好地改写事情。我复制了我的代码并将其粘贴在一个独立的页面上，它只打印一次，所以我的代码实际上没有任何问题，它的工作方式应该是这样的。

因此，我想知道是否还有其他原因导致它在提交表单后打印两次。我的表格和我的结果页面在同一页面上。这是否意味着它导致现场活动进行了两次？因此，导致它在 pageshow 上两次打印到控制台？如果我是正确的，有没有办法解决这个问题并让它只打印一次？

任何帮助表示赞赏。谢谢！

4

3 回答 3

1

Okay I finally solved it.

Apparently all I have to do is to add this line of code to it:

    $(window).scroll(function (e) {
        if (reach bottom) {
            e.stopImmediatePropagation();
            console.log('End of the Page');
        } 
    });

And it works! Stopped printing twice for me.

于 2012-10-27T08:20:11.797 回答
0

May this will solve your problem 

jQuery(window).scroll(function() {
    if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {        
    console.log('test')                                         
    }
});

//Update

    var lastlogtime= null;
jQuery(window).scroll(function() {
        if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {
        if(((lastlogtime+600)<(+new Date())) || (lastlogtime== null)){
            //your scroll logic
            console.log('test')         ;
            lastlogtime=    +new Date();                            
            }
        }
    });
于 2012-10-25T11:47:57.913 回答
0

您的函数实际上会将输出写入控制台两次以上。问题在于您的情况：

if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height())))

因为对于该区域内的每个滚动，条件都会评估为真。您可以将其更改为：

if ($(window).scrollTop() == ($(document).height() - ($(window).height())))
于 2012-10-25T11:28:17.230 回答