[解決済み] jQuery $(document).ready と UpdatePanels?

質問

UpdatePanel内の要素にマウスオーバー効果をかけるためにjQueryを使用しています。イベントは $(document).ready . 例えば

$(function() {    
    $('div._Foo').bind("mouseover", function(e) {
        // Do something exciting
    });    
});

もちろん、これはページが最初にロードされたときには問題なく動作しますが、UpdatePanelがページの部分更新を行うときには実行されず、UpdatePanelの内部ではマウスオーバーの効果はもう機能しません。

最初のページロード時だけでなく、UpdatePanelがページの部分的な更新を行うたびに、jQueryでいろいろと配線するための推奨される方法は何でしょうか。ASP.NET ajaxライフサイクルを使用する必要がありますか？ $(document).ready ?

解決方法は？

UpdatePanelは、更新時にアップデートパネルの内容を完全に置き換えます。つまり、そのアップデートパネルに新しい要素があるため、購読していたイベントは購読されなくなります。

この問題を回避するために私が行ったことは、更新のたびに必要なイベントを再登録することです。私は $(document).ready() を最初の読み込みに使用し、その後、マイクロソフトの PageRequestManager (ページに更新パネルがある場合は利用可能) を使って、更新ごとに再登録します。

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

は PageRequestManager は、更新パネルがページ上にある場合に自動的に利用可能になる javascript オブジェクトです。UpdatePanelがページ上にある限り、これを使用するために上記のコード以外のことを行う必要はありません。

より詳細な制御が必要な場合、このイベントは.NETイベントが引数を渡される方法と同様の引数を渡します。 (sender, eventArgs) 何がイベントを発生させたかを確認し、必要な場合のみ再バインドすることができます。

以下は、マイクロソフト社の最新版のドキュメントです。 msdn.microsoft.com/.../bb383810.aspx

あなたのニーズによっては、jQueryの .on() . これらの方法は、更新のたびに DOM 要素に再サブスクライブするよりも効率的です。しかし、この方法を使用する前に、すべてのドキュメントを読んでください。jQueryプラグインの中には、リファクタリングしてまで .delegate() または .on() そのような場合は、再登録することをお勧めします。