jQuery モバイルスクリプトが最初のページでのみ機能するのはなぜですか?-jsチュートリアル-php.cn

jQuery モバイルスクリプトが最初のページでのみ機能するのはなぜですか?

Barbara Streisand

リリース： 2024-11-12 03:34:02

オリジナル

267 人が閲覧しました

Why Do My jQuery Mobile Scripts Only Work on the First Page?

DOM のような匂いがします...

jQuery Mobile で最も一般的な質問の 1 つは、「なぜすべてのスクリプトをindex.html に置く必要があるのか」です。 。答えの中には、事実よりも多くのノイズが含まれていることがわかるでしょう。この質問では、jQuery Mobile の仕組みと、スクリプトを含めるのを忘れた場合にスクリプトが機能しない理由について詳しく説明します。

jQuery Mobile がページの変更をどのように処理するか

これを理解するにはこの状況では、jQuery Mobile がどのように動作するかを理解する必要があります。他のページをロードするために ajax を使用します。

最初のページは正常にロードされます。 HEAD と BODY は DOM にロードされ、他のコンテンツを待つためにそこにあります。 2 番目のページがロードされると、その BODY コンテンツのみが DOM にロードされます。より正確に言うと、BODY さえも完全にロードされていません。属性 data-role="page" を持つ最初の div のみがロードされ、他のものはすべて破棄されます。 BODY 内にさらに多くのページがある場合でも、最初のページのみがロードされます。このルールは後続のページにのみ適用されます。最初の HTML にさらに多くのページがある場合は、すべてのページが読み込まれます。

そのため、ボタンは正常に表示されますが、クリックイベントが機能しません。ページ遷移中に親 HEAD が無視された同じクリックイベントです。

解決策 1

2 番目のページと 1 つおきのページで、SCRIPTBODY コンテンツに 🎜> タグを追加します。

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

ログイン後にコピー

これは簡単な解決策ですが、まだ醜い解決策です。

実際の例は、私のドキュメントにあります。他の回答はここにあります:

changepage 後にページショーがトリガーされません

別の作業例:

jQuery とモバイルの移行でページが異なる方法で読み込まれました

解決策 2

すべての JavaScript を元の最初の HTML に移動します。すべてを収集し、単一の js ファイル内の

HEAD に入れます。 jQuery Mobile がロードされた後に初期化します。

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

ログイン後にコピー

最後に、これが優れたソリューションの一部である理由を説明します。

解決策 3

使用

rel="external" をボタンとページの変更に使用するすべての要素に追加します。そのため、ページの読み込みに ajax は使用されず、jQuery モバイルアプリは通常の Web アプリケーションのように動作します。残念ながら、これはあなたの場合には良い解決策ではありません。 Phonegap は通常の Web アプリとして動作するべきではありません。

<a href="#second" class="ui-btn-right" rel="external">Next</a>

ログイン後にコピー

公式ドキュメントの章を探してください:

Ajax を使用しないリンク

現実的な解決策

現実的な解決策では、

解決策 2 を使用します。ただし、解決策 2 とは異なり、同じindex.js ファイルを使用し、他のすべてのページの HEAD 内で初期化します。

ここで、

なぜ と尋ねることができます。 ?jQuery Mobile のような

Phonegap にはバグがあり、すべての js コンテンツが 1 つの HTML ファイル内にある場合、遅かれ早かれエラーが発生し、アプリは失敗します (ロードされた DOM を含む)。 DOM が消去され、Phonegap が現在のページを更新する可能性があります。そのページに JavaScript が含まれていない場合は、再起動するまで機能しません。

以上がjQuery モバイルスクリプトが最初のページでのみ機能するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。