ユーザーがフィルターリンクをクリックしたときに、ページのヘッダーの下とフッターの上にあるすべてを置き換えるためにAJAX呼び出しを行っています。
問題は、AJAXイベントの後、さまざまなDOM要素にバインドされているすべてのJavaScriptイベントが壊れることです。それらははるかに低いモジュールレベルの例にバインドされていたので、これは理にかなっています
$(".innerDiv").on("click",function(){doSomething();}
親コンテナのコンテンツを置き換えることにより、これらのイベントはバインドされなくなります。
この問題を処理する正しい方法は何ですか?イベントリスナーをはるかに高いレベルに追加できます。
$(document).on("click",".innerDiv",function(){doSomething();}
ただし、これには、jQueryのlive()関数が非推奨になったのと同じ非効率性と問題があります。
私が提案した他の解決策は、AJAX呼び出しの後にイベントを再バインドすることです。問題は、これが私が扱っているかなり複雑なページであり、それぞれが独自のバインディングを持つ多くのJavaScriptモジュールを含んでいることです。バインドされるすべてのイベントを追跡するにはどうすればよいですか?jQuery内からこの情報にアクセスする方法はありますか?イベントがバインドされているすべての要素の独自のデータ構造を維持する必要がありますか?
また、AJAXリクエストを行う前に、「off()」関数を使用してイベントのバインドを解除する必要がありますか?
ご協力いただきありがとうございます