1

Jquery Mobileは、ナビゲートするときにDOMにいくつかのページを保持するため、前後に移動するときにページに複数回アクセスされる可能性があります。

以下のようなページにバインドしている場合、このバインディング内で、「ネストされた要素のバインディング」を含むすべてのページロジックを実行します。

// listener for the page to show:
$(document).on('pagebeforeshow.register', '#register', function() {

    // stuff

    // page event bindings:
    $(document).on('click.register', '.registerSubmitter', function(e) {
        // do something
        });
    });

前後に移動すると、ネストされたバインディングが複数回アタッチされます。

現在、このように回避しようとしています（機能しません...）：

 $(document).on('click', '.registrySubmitter', function(e) {

         if ( $(this).attr('val') != true ) {
            $(this).attr('val') == true;
            // do something
            }
     });

したがって、最初のバインディングのみを通過させてから、他のすべてのバインディングの試行をブロックします。

これは機能しますが、最適にはほど遠いです。

質問：
イベントバインディングを適切にアンバインド/オフにする方法とタイミングを教えてください。一般的な方法（すべてを殺す）はありますか、それともバインディングごとにこのバインディングを実行する必要がありますか？おそらくもっと重要なのは、パフォーマンスの面で、一度バインドを実行してそれを保持するか、ユーザーがページにアクセス/ページを離れるときにバインド/バインド解除する方がよいでしょうか。

入力ありがとうございます！

編集：
だから私はすべてのイベントの名前空間を作成してから、次のようにpageHideをリッスンします：

$(document).on('pagehide.register', '#register', function(){
   $(document).off('.registryEvents');
   });

これはバインドが解除されているように見えますが、ページのカスタムダイアログ/選択メニューを閉じるたびに発生するため、ページを離れる前にバインドを失っています。部分的な答えですが、off（）を使用する必要がありますが、選択メニューを開いたり閉じたりするのではなく、実際に残っているページにバインドする方法はありますか？

4

1 に答える 1

3

このように使用する.on()と、イベント処理を要素に委任することになります。つまり、要素は常に使用可能であるdocumentため、委任されたイベントバインディングをいつでも設定できます。document

私は2つの提案があります：

  • pageinitorイベントを使用して、pagecreateページがDOMに追加され、初期化されたときにのみページ固有のバインディングを実行します。このメソッドを使用すると、pageinitまたはpagecreateイベントハンドラー内のイベントバインディングを委任しません。これは、イベントハンドラーが起動すると、疑似ページのすべての要素がDOMにあるためです。

。

$(document).on('pageinit', '#register', function() {
    //note that `this` refers to the `#register` element
    $(this).find('.registerSubmitter').on('click', function(e) {
        // do something
    });
});
  • 委任されたイベントハンドラーを1回バインドし、ページが実際にDOMにあるかどうかを気にする必要はありません。

。

//this can be run in the global scope
$(document).on('click.register', '.registerSubmitter', function(e) {
    // do something
});

基本的に、委任を使用してイベントをバインドする場合、イベントハンドラーを追加することによる実際のCPUヒットは少なくなりますが、イベントがディスパッチされるたびに（バブルするあらゆる種類の）、委任されたイベントハンドラーのセレクターと一致するかどうかを確認する必要があります。 。

document要素に直接バインドする場合、イベント委任のように要素に1回バインドするのではなく、個々の要素をバインドする必要があるため、通常、実際のバインドを行うのに時間がかかります。ただし、これには、特定の要素が特定のイベントを受け取らない限り、コードが実行されないという利点があります。

ドキュメントからの簡単な宣伝文：

初期化が発生した後、初期化中のページでトリガーされます。DOM ready（）の代わりにこのイベントにバインドすることをお勧めします。これは、ページが直接読み込まれるかどうか、またはコンテンツがAjaxナビゲーションシステムの一部として別のページにプルされるかどうかに関係なく機能するためです。

ソース： http： //jquerymobile.com/demos/1.1.0/docs/api/events.html

于 2012-06-08T16:12:45.157 に答える