web-dev-qa-db-ja.com

Ajax更新後のjQueryのイベントの再バインド（updatepanel）

私のページにはいくつかの入力要素とオプション要素があり、それぞれ（ほぼ）それぞれ変更されたページのテキストを更新するイベントが添付されています。本当にクールなjQueryを使用しています:)

Updatesnelを利用して、Microsoft Ajax フレームワークも使用しています。私がそうする理由は、サーバー側のロジックに基づいて特定の要素がページ上に作成されるためです。 UpdatePanelを使用する理由を説明したくありません かなりの努力で）---（jQuery のみを使用するように書き換えることができたとしても。

おそらくそれを推測しました-UpdatePanelでポストバックを取得すると、jQueryイベントが機能しなくなります。 「ポストバック」は実際には新しいポストバックではないため、イベントをバインドするdocument.readyのコードは再度起動されないため、実際にはこれを期待していました。また、jQueryヘルプライブラリで読んで、疑いを確認しました。

とにかく、UpdatePanelが [〜＃〜] dom [〜＃〜] の更新を完了した後、コントロールを再バインドする問題が残っています。ページに追加の.jsファイル（jQueryプラグイン）を追加する必要はありませんが、UpdatePanelの「更新後処理」をキャッチして、すべてのフォーム要素を再バインドするためのメソッドを呼び出すことができるシンプルなソリューションが必要です。 。

asp.netjqueryasp.net-ajaxupdatepanel
78
Per Hornshøj-Schierbeck

ASP.NET AJAXを使用しているので、ページがポストバックするたびに呼び出されるpageLoadイベントハンドラーにアクセスできます。UpdatePanelから完全または部分的になります。関数をページに追加するだけで、接続する必要はありません。

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}
84
Phil Jenkins

または、 on() メソッドを使用して、最新のjQueryのライブ機能を確認できます。

23
George
Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}
21
Paulius

JQuery 1.7以降、これを行うための推奨される方法は、 jQueryの.on（） 構文を使用することです。

ただし、DOMオブジェクト自体ではなく、documentオブジェクトでイベントを設定してください。たとえば、UpdatePanelポストバックの後、これは壊れます：

$(':input').on('change', function() {...});

...「：inputs」が書き換えられたためです。代わりにこれを行います：

$(document).on('change', ':input', function() {...});

ドキュメントが存在する限り、入力（UpdatePanelの更新からの入力を含む）は変更ハンドラーをトリガーします。

14
lambinator

次のコードを使用

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}
9
shatl

JQueryとイベント委任を使用できます。基本的に、すべての要素ではなくコンテナにイベントをフックし、event.targetをクエリし、それに基づいてスクリプトを実行します。

コードノイズを減らすという点で複数の利点があります（再バインドする必要はありません）。ブラウザのメモリでも簡単です（DOMでバインドされたイベントが少ない）。

簡単な例 here 。

jQueryプラグイン イベントの委任を簡単にします。

P.S次のリリースで委任がjQueryコアに含まれることは99％確信しています。

8
redsquare

次のコードを使用します。コントロールが日付ピッカーを使用することを検証する必要があります。

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>
5
rocke_amiga
         <script type="text/javascript">
             function pageLoad() {

                 if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

updatepanelがAsyncPostBackを実行するたびに実行する必要があるコードを「if」に入れることができます。

4
civanm

JQueryの新しい「ライブ」メソッドを使用してイベントをバインドします。現在のすべての要素と将来のすべての要素にもイベントをバインドします。チャチン！ :)

2
John Strickler