6

多くの画面とナビゲーションを持つ ajax Web アプリケーションの場合、div、リンク、またはボタンのイベント ハンドラーをアタッチするには、次のようにコーディングできます。

//Using $.on inside Ajax success handler

$("#container").on("click", "#selector", function(event){

});

  • コンテナーが DOM に存在しない場合、このアプローチは機能しません。機能させるには、コンテナとしてドキュメントまたはボディを使用する必要がありますが、パフォーマンスが良くない場合があります。

  • Ajax 成功ハンドラーには、多くのコード行が含まれる場合があります。整理しやすくするために、コードを関数に移動し、Ajax 成功ハンドラーでその関数を呼び出すことができます。しかし、すべての順列と組み合わせに対して、多くの登録イベント関数を作成する必要があります。

  • 関数のコードの乱雑さを登録します。

  • イベント ハンドラーが既に登録されている場合、再度登録すると 2 つの偶数ハンドラーが発生します。そのため、登録を解除して登録する必要があります (または、まだ接続されていない場合にのみ接続します) - パフォーマンスの問題については不明です。

代替案はありますか？

私は次のことを考えています：

  • モジュールのコンテナー、ターゲット、およびクリック イベント ハンドラーのマップを 1 か所で維持します。

  • ajaxComplete グローバル イベント ハンドラーで、xhr.responseHTML にコンテナーがある場合、イベント ハンドラーをターゲット要素にアタッチします (まだアタッチされていない場合のみアタッチします)。

    $(document).ajaxComplete(function(e, xhr, settings){
   for(ind in clickEventListeners){eventlistner = clickEventListeners[ind];
    if($(eventlistner.container,xhr.responseHTML).length > 0){
      $(eventlistner.target).on("click",function(){
      eventlistner.processor(this);
      });
  }
 }
});

長所 : モジュールのすべてのイベント ハンドラーが 1 か所に文書化されています。ajax 成功ハンドラーごとにコードが煩雑になることはありません。

短所：あるかどうかはわかりません。

提案があれば教えてください。

4

3 に答える 3

9

更新しました

動的に追加される要素にイベントをバインドするには、バージョン 1.9 以降の要素ではなく、リスナーをドキュメントに配置する必要があります。Jquerys api から、次の行を見つけることができます。

「イベント ハンドラーは、現在選択されている要素にのみバインドされます。コードが .on() を呼び出す時点で、イベント ハンドラーはページ上に存在する必要があります。」

そのため、イベントをドキュメントにバインドし、その後にセレクターを配置すると、このリスナーを実際に認識できるようになります。

$(document).delegate( "#selector", "click",

また

$(document).on( "click", "#selector",

例: http://jsfiddle.net/2HA7d/

以前の Jquery リリースでは、 live() 関数を使用して、リスナーを実際にドキュメントに配置し、これが思ったとおりに機能するようにすることができました。

$("#selector").live("click",

例: http://jsfiddle.net/q3jYB/

2 番目の例は、最初の例と同じように機能します。

要素がまだ存在しないため、JavaScript は探している要素のイベント リスナーを追加できません。そのため、動的に追加された要素のリスナーを追加しようとしていて、新しいバージョンの jquery (1.9+) を使用していて、on() または delegate() を使用している場合は、最初に提供された Fiddle に示されているように、イベント リスナーをドキュメントに追加します。

編集：

Will I AM がコメントで述べているように、可能であればイベント リスナーをコンテナに追加することも非常に実行可能なオプションであり、パフォーマンスが向上する可能性があります

ソース:

https://api.jquery.com/on/

http://jquery.com/upgrade-guide/1.9/

jQuery .live() はどのように機能しますか?

お役に立てれば。

于 2014-02-16T11:55:39.253 に答える
1

私はあなたと同じような状況にありました。これを試してみてください。これは私の側ではうまくいきます!

  • 最初にマスターファイルで、次のようにイベントハンドラーをバインドします。

    $('body').bind( 'gridloaded', function(e,f) { my logic } );

  • 最後に DOM ツリーを動的に設定する ajax ファイルで、次のように、必要な場所にトリガーを追加し、要素 ID を追加します。

    $('body').trigger('gridloaded', $(this).attr('id') );

    onClickButton: function(){ $("body").trigger("gridloaded", $(this).attr('id')) }

私がこのアプローチを気に入っているのは、それがクリーンだからです: ajax 呼び出しにどれだけ時間がかかっても、適切なタイミングで常に 1 つのイベントだけがトリガーされます。

于 2014-02-20T15:36:56.337 に答える