☰

jQuery $(document).ready と UpdatePanels? 質問する

tag-icon • tag-icon javascript jquery asp.net asp.net-ajax jquery-events
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?

ベストアンサー1

UpdatePanel は、更新時に更新パネルの内容を完全に置き換えます。つまり、更新パネルに新しい要素があるため、サブスクライブしていたイベントはサブスクライブされなくなります。

これを回避するために私が行ったのは、更新のたびに必要なイベントを再購読することです。私は$(document).ready()初期ロードに使用し、その後Microsoftの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)ため、イベントの発生原因を確認し、必要な場合にのみ再バインドできます。

以下は Microsoft のドキュメントの最新バージョンです。msdn.microsoft.com/.../bb383810.aspx

ニーズに応じて、より良い選択肢はjQueryの.on()これらの方法は、更新のたびに DOM 要素を再サブスクライブするよりも効率的です。ただし、この方法がニーズを満たすかどうかはわからないため、この方法を使用する前にすべてのドキュメントを読んでください。 または を使用するようにリファクタリングするのが不合理な jQuery プラグインが多数あるため.delegate()、.on()そのような場合は再サブスクライブする方がよいでしょう。

おすすめ記事