1

アンカー要素がクリックされたときにユーザーを Web ページの下部に移動させるために、スクリプトを使用しています。

最初に、$(document).ready() 関数内でコードを呼び出して、DOM が読み込まれるとすぐにすべてが実行されるようにしました。次に、モバイル サイトのページ間を移動したときに、スクリプトが機能していないことに気付きました。

$(document).ready(function(){
    $("#menu-button").click(function(){
            $(document).scrollTop($(".mainFooter").position().top);
         });
    });

ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM 対応ハンドラーは最初のページに対してのみ実行される理由がわかりました。新しいページがロードされて作成されるたびにコードを実行するには、このページの下部に記載されている pageinit イベントにバインドできます: http://jquerymobile.com/demos/1.1.1/docs/api/ events.html

pageinit イベントにバインドしましたが、別のページ間を移動してから同じアンカーをクリックしても、アンカーはユーザーをページの下部に移動しません。pageinit にバインドしても問題が解決しない理由を理解するのに苦労しています。

 $(document).bind('pageinit', function() {
    $("#menu-button").on('click.menu', function(){
        $(document).scrollTop($(".mainFooter").position().top);
     });
    });

jQuery モバイルで AJAX をオフにできることを認識しています。これにより、コードを $(document).ready() 関数で実行できるようになります。これを行うことで、目的の機能を実現することができました。理想的には、ページがAJAXでロードされるたびにアンカーが機能するように、AJAXを有効にしてpageinitを動作させたいと思います。

どんな提案でも大歓迎です。

4

2 に答える 2

1

機能させるには、 jQuery Mobile が実際にロードされる前にmobileinitそのコードを配置する必要があります。そのため、次のように JS ソース コードにリンクを追加する必要があります。

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> // Place mobileinit script here
<script src="jquery-mobile.js"></script>

詳細については、こちらのドキュメントを参照してください

また、mobileinit は基本的にグローバルをオーバーライドするためのものであり、サイトの通常の機能を使用するためのものではないことに注意してください。

その目的のために、、などpagebeforeshowのpageshow他のイベントを使用しますpagebeforeload

于 2012-09-10T15:55:05.140 に答える
0

まだDOMにないものにイベントをバインドしようとしていると思います。代わりにこれを試してください：

$(document).bind('pageinit', function() {
    $(document).on('click.menu', '#menu-button', function(){
        $(document).scrollTop($(".mainFooter").position().top);
    });
});

また

$(document).bind('pagebeforeshow', function() {
    $("#menu-button").on('click.menu', function(){
        $(document).scrollTop($(".mainFooter").position().top);
    });
});
于 2012-09-10T15:52:31.093 に答える