ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery モバイル スクリプトが最初のページでのみ機能するのはなぜですか?
jQuery モバイル スクリプトが最初のページでのみ機能するのはなぜですか?
- Barbara Streisandオリジナル
- 2024-11-12 03:34:02268ブラウズ
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 サイトの他の関連記事を参照してください。