jQuery $（document）.readyおよびUpdatePanels？

私はjQueryを使用して、UpdatePanel内の要素にマウスオーバー効果を関連付けています。イベントはバインドされています$(document).readyます。例えば：

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

もちろん、これは最初にページが読み込まれたときに正常に機能しますが、UpdatePanelが部分的なページ更新を実行すると、ページは実行されず、マウスオーバー効果はUpdatePanel内では機能しなくなります。

最初のページの読み込み時だけでなく、UpdatePanelが部分的なページの更新を起動するたびにjQueryでデータを配線するための推奨されるアプローチは何ですか？代わりにASP.NET Ajaxライフサイクルを使用する必要があり$(document).readyますか？

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要素に再サブスクライブするよりも効率的です。ただし、このアプローチを使用する前に、すべてのドキュメントを読んでください。これは、ニーズを満たしていない場合があるためです。.delegate()またはを使用するようにリファクタリングするのが無理なjQueryプラグインはたくさんある.on()ので、そのような場合は、再サブスクライブするほうがよいでしょう。

<script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

更新される予定のエリア。

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>

UpdatePanel内のjQueryによるユーザーコントロール

これは質問への直接の回答ではありませんが、私がここで見つけた回答を読んでこの解決策をまとめました。誰かが役に立つと思うかもしれません。

ユーザーコントロール内でjQuery textareaリミッターを使用しようとしました。ユーザーコントロールがUpdatePanel内で実行され、コールバック時にバインディングが失われるため、これはトリッキーでした。

これが単なるページの場合、ここでの回答は直接適用されます。ただし、一部の回答が想定しているように、ユーザーコントロールはヘッドタグに直接アクセスすることも、UpdatePanelに直接アクセスすることもできませんでした。

このスクリプトブロックをユーザーコントロールのマークアップの一番上に配置することにしました。最初のバインドでは、$（document）.readyを使用し、次にそこからprm.add_endRequestを使用します。

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

だから...誰かがこれがうまくいくことを知りたいのかもしれないと思っただけです。

jQuery 1.3にアップグレードして使用します。

$(function() {

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

});

注：ライブはほとんどのイベントで機能しますが、すべてではありません。ドキュメントに完全なリストがあります。

あなたも試すことができます：

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

、pageLoad（）はASP.NET ajaxイベントであるため、ページがクライアント側で読み込まれるたびに実行されます。

私の答え？

function pageLoad() {

  $(document).ready(function(){

等

他の多くのソリューションが惨めに失敗した魅力のように働きました。

次のいずれかの方法を使用します。

1. イベントバインディングを関数にカプセル化し、ページを更新するたびに実行します。イベントを同じ要素に何度もバインドしないように、特定の要素にイベントバインドを常に含めることができます。

2. 基本的にメソッド1を自動で自動的に実行するlivequeryプラグインを使用します。優先順位は、イベントバインディングを制御する量によって異なります。

これは私のために働きました：

$(document).ready(function() {

    // Do something exciting

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

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

});

関数pageLoad（）は、この状況で使用するのは非常に危険です。イベントを複数回配線することができます。また、.live（）はドキュメント要素にアタッチされ、ページ全体をトラバースする必要があるため（低速で安っぽい）、私は.live（）から離れます。

これまで見てきた最善の解決策は、更新パネルの外のラッパーでjQuery .delegate（）関数を使用し、バブリングを利用することです。それ以外の場合は、UpdatePanelsで動作するように設計されたMicrosoftのAjaxライブラリを使用して、ハンドラーを常に接続できます。

$(document).ready(function (){...})ページポストバック後に機能しない場合は、次のようにAsp.pageでJavaScript関数pageLoadを使用します。

<script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once. 
}
</script>

私にも同様の問題があり、イベントバブリングとイベント委任を利用してそれを処理するのが最も効果的であることがわかりました。イベントの委任の良い点は、一度設定すると、AJAXの更新後にイベントを再バインドする必要がないことです。

私のコードでは、更新パネルの親要素にデリゲートを設定しています。この親要素は更新時に置き換えられないため、イベントバインディングは影響を受けません。

jQueryでのイベントの委任を処理する優れた記事とプラグインがいくつかあり、その機能は1.3リリースに組み込まれる可能性があります。参考に使用する記事/プラグインは次のとおりです。

http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

何が起こっているのか理解したら、更新のたびにイベントを再バインドすることを覚えておくことよりも信頼性の高い、はるかにエレガントなソリューションであると思います。これには、ページがアンロードされるときに1つのイベントをバインド解除するという追加の利点もあります。

FWIW、mootoolsで同様の問題が発生しました。イベントの再アタッチは正しい動きでしたが、リクエストの最後に行う必要がありました。

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {... 

beginRequestによってnull参照JS例外が発生する場合に注意する必要があることだけです。

乾杯

これは、更新パネルで使用するのに最適なプラグインです。

http://updatepanelplugin.codeplex.com/

pageLoad = function () {
    $('#div').unbind();
    //jquery here
}

pageLoad関数は、最初のページ読み込みとすべてのupdatepanel非同期ポストバックで実行されるため、このケースに最適です。jqueryをupdatepanelポストバックで機能させるには、バインド解除メソッドを追加する必要がありました。

http://encosia.com/document-ready-and-pageload-are-not-the-same/

私の回答は上記のすべてのエキスパートコメントに基づいていますが、以下は、ポストバックごとと非同期ポストバックごとにJavaScriptコードが引き続き実行されることを確認するために誰でも使用できる次のコードです。

私の場合、ページ内にユーザーコントロールがありました。以下のコードをユーザーコントロールに貼り付けるだけです。

<script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

更新パネルは、ロードのたびにJqueryを常に組み込みのScriptmanagerのスクリプトに置き換えます。このようなpageRequestManagerのインスタンスメソッドを使用すると、より良い...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

それはうまくいきます...

以下のスクリプトを使用し、それに応じてスクリプトの本文を変更します。

       <script>
        //Re-Create for on page postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
           //your codes here!
        });
    </script>

ブライアン・マッケイの答えに応じて：

JavaScriptをUserControlのHTMLに直接挿入するのではなく、ScriptManagerを介してページに挿入します。私の場合、UpdatePanelが完了して戻った後に表示されるフォームまでスクロールする必要があります。これは、コードビハインドファイルに入ります。私のサンプルでは、メインコンテンツページにprm変数をすでに作成しています。

private void ShowForm(bool pShowForm) {
    //other code here...
    if (pShowForm) {
        FocusOnControl(GetFocusOnFormScript(yourControl.ClientID), yourControl.ClientID);
    }
}

private void FocusOnControl(string pScript, string pControlId) {
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}

/// <summary>
/// Scrolls to the form that is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string GetFocusOnFormScript(string pControlId) {
    string script = @"
    function FocusOnForm() {
        var scrollToForm = $('#" + pControlId + @"').offset().top;
        $('html, body').animate({ 
            scrollTop: scrollToForm}, 
            'slow'
        );
        /* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
        prm.remove_endRequest(ScrollFocusToFormCaller);
    }
    prm.add_endRequest(ScrollFocusToFormCaller);
    function ScrollFocusToFormCaller(sender, args) {
        if (args.get_error() == undefined) {
            FocusOnForm();
        }
    }";
    return script;
}

Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
        $(document).ready(function () {
        //rebind any events here for controls under update panel
        });
}