asp.net - Ajax 更新後の jQuery でのイベントの再バインド (updatepanel)

Question

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

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

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

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

score 86 · Accepted Answer

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

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

score 23 · Accepted Answer

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

score 22 · Accepted Answer

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

score 14 · Accepted Answer

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

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

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

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

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

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

score 9 · Accepted Answer

次のコードを使用します

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

score 8 · Accepted Answer

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

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

ここに簡単な例があります。

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

PS 次のリリースで委譲が jQuery コアに組み込まれることは 99% 確信しています。

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

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

score 2 · Accepted Answer

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

asp.net - Ajax 更新後の jQuery でのイベントの再バインド (updatepanel)

9 に答える 9

Related

Reference