2

ページ コンテンツが読み込まれるまで Jquery Mobile の初期化を防止しようとしていますが、目的の結果が得られません。このプロジェクトは、簡単な質疑応答クイズです。私の HTML ドキュメントには、3 つのコンテナ div[data-role=page] があります。

div[data-role=page]#pg_title
div[data-role=page]#q0
div[data-role=page]#result

私の document.ready() は、外部の JSON ファイルを解析してこれらのページにコンテンツをロードし、#q0 をクイズの質問数に複製します。最終結果は次のようになります。

div[data-role=page]#pg_title
div[data-role=page]#q0
div[data-role=page]#q1
div[data-role=page]#q2
div[data-role=page]#q3
div[data-role=page]#q4
div[data-role=page]#result

私の文書の頭には、次のものがあります。

<script>
    $(document).bind("mobileinit", function () {
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="js/quiz.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.htmlは、Jquery Mobile をロードする前に設定を構成するように指示しています。quiz.js の最後に、ページを初期化するための呼び出しがあります。

$(document).ready(function(){

    // ... all the code to load JSON quiz content is here

    $.mobile.initializePage();
});

私の問題は、タイトル ページから最初の問題ページに進むと、すべての問題が同時に表示されることです。レンダリングされた HTML は次のようになります。

<div data-role="page" id="q0" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q1" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q2" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q3" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q4" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>

document.ready() の後、mobile.initializePage が呼び出される前に、HTML は次のようにレンダリングされます。

<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q4" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q5" class="pg_type_question" data-title="Quiz Title">...</div>

すべての質問ページが「q0」のデータ URL でアクティブになっている理由がわかりません。

よろしくお願いします。

4

1 に答える 1

3

全ページ見ないとなんとも言い難いです。これは、あなたが説明したことをまとめた例です。autoInitializePageが false ( jQuery Mobile が読み込まれる前) に設定されている場合、ページが読み込まれた後に一部の要素が DOM に追加され、ページ$.mobile.initializePage();の操作が完了すると呼び出されます。jQuery Mobile はそれを期待どおりに初期化し、ナビゲーション リンクが機能しているように見えます。

<html> 
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.autoInitializePage = false;
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('body').append(
                '<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 1</h1>' +
                    '</div>' +
                    '<div data-role="content">' +
                        '<h2>Content</h2>' +
                        '<p><a href="#q2" data-role="button">To Page 2</a></p>' +
                    '</div>' +
                '</div>' +
                '<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 2</h1>' +
                    '</div>' +
                    '<div data-role="content">  ' +
                        '<h2>Content</h2>' +
                        '<p><a href="#q3" data-role="button">To Page 3</a></p>  ' +
                    '</div> ' +
                '</div>' +
                '<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 3</h1>' +
                    '</div>' +
                    '<div data-role="content">' +
                        '<h2>The End</h2>' +
                    '</div>' +
                '</div>'
            );

            $.mobile.initializePage();
        });
    </script>
  </head> 
  <body>
    <div data-role="page" id="title" data-title="Quiz Title">
        <div data-role="header">
            <h1>Title Page</h1>
        </div>
        <div data-role="content">
            <h2>Welcome</h2>
            <p><a href="#q1" data-role="button">To Page 1</a></p>
        </div>
    </div>
  </body>
</html>

遊んでいるうちに、[div data-role="page"]要素は互いに兄弟である必要があることに気付きました。それらすべてを誤ってタイトルページまたは本文以外の親要素に追加していないことを確認してください。

外部の JSON ソースを呼び出している場合は、呼び出しが$.mobile.initializePage();完了コールバックで処理されるようにする必要があります。そうしないと$.mobile.initializePage();、JSON ソースへの AJAX 呼び出しが完了する前に呼び出されるという競合状態になる可能性があります。

お役に立てれば！

于 2012-07-11T15:23:43.743 に答える