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

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

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

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

とにかく、UpdatePanelがDOMの更新を完了した後、コントロールを再バインドするという問題が残ります。ページに.jsファイル（jQueryプラグイン）を追加する必要がないソリューションが必要ですが、メソッドを呼び出してすべてのフォーム要素を再バインドできるUpdatePanelの「変更後」をキャッチできるような単純なものが必要です。 。

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

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

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

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

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

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

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

... '：inputs'が書き直されたため。代わりにこれを行ってください：

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

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

次のコードを使用します

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;
        }
    }
}

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

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

ここで簡単な例。

jQueryプラグイン簡単なイベント委任のための。

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

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

    <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>

         <script type="text/javascript">
             function pageLoad() {

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


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

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

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