2

いくつかのページをロードするjQueryMobileWebアプリを作成しています。

たとえば、a.html私のメインページです。、、 ...、b1.htmlと呼ばれる場合があります（ユーザーはボタンの1つをクリックできます）。（ページはjQuery Mobileのajaxナビゲーション機能で読み込まれています）b2.htmlb100.html

b[i].htmlそして、各ページにはいくつかのイベントがありid、すべてのページで同じものがたくさんありb[i].htmlます。ただし、重要なのは、いつでも、そのうちの1つだけがDOMに含まれている可能性があるということです。idしたがって、競合などは発生しません。

問題

問題は、イベントの競合です。a.htmlユーザーがから戻るとb[i].html、HTMLは削除されますが、イベントは残ります。これは、最初にに移動しb[i].html、次にに戻ってからにa.html移動すると、多くの問題を引き起こしb[j].htmlます。つまり、b[j].html正しく動作しません... :(

私が試したこと

a.htmlすべてのイベントを削除するために、これを入れました。

$("#mainpage").off("pagebeforeshow").on("pagebeforeshow",function() {
    $("*").not("#mainpage").off();
    //Other initialization codes...
});

しかし、問題は解決されていません...

（mainpageのIDdata-role="page"ですa.html）

例

たとえば、私はそれぞれにこれを持っていますb[i].html：

$(window).resize(function () {
    alert("Resized");
});

最初（でa.html）、ウィンドウのサイズを変更してもアラートは表示されませんが、にアクセスb[i].htmlしてから戻った後a.html、そのコード行を使用してもウィンドウのサイズを変更するとアラートが表示されます（私が試したこと部。）...

a.htmlでは、ユーザーがから戻ってきたときにこれらのイベントハンドラーを削除するにはどうすればよいb[i].htmlですか？

4

1 に答える 1

3

jQuery Mobile を使用している場合、複数のページが同時に dom に存在する可能性があり、一意でない ID の競合が発生します。

個々のページに js を配置するのはやめて、プライマリ ページから実行するか、require.js などのスクリプト ロード システムを使用します。次に、ドキュメントからの委任を通じてすべてのイベントを実行します。明らかにそれは window.resize() では機能しませんが、委任する必要はありません。

「もっと説明してもらえますか？」

基本的に、子ページにスクリプトを含める場合は、ページごとにセットアップとティアダウンの両方が必要になります。setup はイベントを追加し、teardown はイベントを削除します。代わりに、ドキュメントからのイベント委任を使用してすべてのイベントを追加する単一のグローバル スクリプトを使用した場合、すべてのページが機能するはずです。明らかに、グローバル スクリプトは複雑なサイトではかなり大きくなる可能性があるため、代わりに require.js を使用して、必要に応じて同じことを行う js をロードし、同じ依存関係を複数回ロードしないようにすることができます。

すべてのイベントを削除する限り、これを試したことはありませんが、使用できます$("*").off()か? ドキュメントによると、それは動作するはずです。jQuery モバイルにどのように影響するかはわかりません。ドキュメントやウィンドウのイベントを削除するには、手動で行う必要$("*")があります。

$(document).on("vmousemove","#link",func)ドキュメントからイベントを委任する方法です。

于 2012-09-11T21:41:00.483 に答える