2

シングルページテンプレートの方法で2ページを書いています。

Login.html に<script src="login.js" />は彼が<head></head>あり、これは次のようなものです。

$(document).on("pageinit", "#loginPage", function(){
   $("#loginBtn").on("tap", function(){
      // if you are already authenticate or login success...
      $.mobile.changePage("Main.html");
   });
});

Main.html は<script src="main.js" />彼の中に<div data-role="page" id="main"></div>あり、これは次のようなものです:

$(document).on("pageinit", "#main", function(){
//if not authenticated go to login
   $.mobile.changePage("Login.html");

    callJsonService();

$("#btnLogout").on("tap", function(){
            //do logout operatio and go back to login
    $.mobile.changePage("Login.html");
}).on("vmousedown", function(){
    $(this).addClass("tapped");
}).on("vmouseup", function(){
    $(this).removeClass("tapped");
});

これらの 2 つのページを前後に移動すると、そのページにアクセスするたびに、バインドされたイベントon()が 2 回、次に 3 回、次に 4 回、というように発生します。

なぜこうなった？「pageinit」イベントが原因ですか？または、main.js を data-role=page で div 内に配置するのは正しくありませんか?

4

2 に答える 2

1

あなたの中に JS をロードしないでください。複数回起動します。各ページに含める js ファイルのドキュメント ルートにリスナーを<div data-role="page"/>バインドするのが好きです。on

$(document).on('pageinit pageshow', 'div:jqmData(role="page"),   
div:jqmData(role="dialog")', function(event){

<div data-role="page" data-pageid="foo"/>さまざまなページを区別するために、ある種のデータ変数またはクラスを配置します。これで、コードを分岐するための 2 つの変数ができました。

  1. event.type = pageinit/pageshow: 最初のイベントはページごとに 1 回だけ発生し、後者は最初の読み込み時に発生し、[戻る] を押してページに戻ると再発生します。

  2. $(this).data('pageid') = 必要なものは何でも、この場合、ページfooがいずれかのイベントを発生させた場合、適切に処理でき、驚くことはありません

詳細については、私の古い回答を参照してください: https://stackoverflow.com/a/10542821/737023

于 2012-11-06T23:56:28.560 に答える
0

ここにいくつかの矛盾があるようです。SPA テンプレートを使用して複数の物理ページをロードすると、論理ページ (<div data-role="page"></div>タグ内に含まれる) が ajax を介してロードされ、DOM に追加されます。これらの論理ページ内にスクリプト タグを配置することにより、スクリプトが複数回 (ページの読み込みごとに 1 回) 起動され、複数のイベント バインドが発生します。

すべてのスクリプトを論理ページの外に配置する必要があります。適切な場所は、最初のページ (main.html) のヘッダー内です。

于 2012-11-06T17:49:53.763 に答える