2

最新バージョンのPhoneGap、jQM、jQuery1.8.0を使用してアプリケーションを構築しています。私が遭遇したこの小さくて厄介な問題を除いて、これまでのところ良いです。

次のコードを含むindex.htmlからshow.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>

送信ボタンがクリックされると、リストがajaxを使用して動的に追加されるため、ulタグは空です。最初は#listdivを表示したくなかったので、表示をnoneに設定しました。

したがって、これは正常に機能します。送信ボタンをクリックすると、サーバーに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
        } 
    });  
});

これにより、「ページの終わり」がFirebugコンソールに2回出力されます。このスクリプトは、headタグの間にあります。

とにかく一度だけ印刷する方法はありますか？これが必要なのは、独自の無限スクロール機能を実装し、問題がajaxリクエストをサーバーに2回投稿する原因になっているためです。この関数はうまく機能しますが、lastPostFunc（）をコメントアウトしても、コンソールに2回出力されるため、問題の原因にはなりません。

編集：個人的に、私はこれまでに与えられた答えが間違っているとは思いません、それらは正しいですが、それらは私が問題を解決するのを助けません。多分私は物事をよりよく言い換える必要があります。コードをコピーしてスタンドアロンページに貼り付けたところ、1回しか印刷されないため、コードに問題はなく、正常に機能しています。

そのため、フォームの送信後に2回印刷される原因が他にあるのではないかと考えていました。フォームと結果ページは同じページにあります。これは、ライブイベントが2回機能したことを意味しますか？したがって、ページショーでコンソールに2回印刷しますか？私が正しければ、これを回避して1回だけ印刷するようにする方法はありますか？

どんな助けでも大歓迎です。ありがとうございました！

4

3 に答える 3

1

さて、私はついにそれを解決しました。

どうやら私がしなければならないのは、このコード行を追加することだけです。

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

そしてそれは動作します！私のために2回印刷を停止しました。

于 2012-10-27T08:20:11.797 に答える
0

関数は実際に2回以上コンソールに出力を書き込みます。問題はあなたの状態にあります：

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

この領域内のすべてのスクロールについて、条件はtrueと評価されるためです。次のように変更できます。

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

これで問題が解決しますように 

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

//アップデート

    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 に答える