jQuery $(dokument).gotowe i aktualizowane Panele?

<script type="text/javascript">

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

Obszar, który będzie aktualizowany.

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

Kontrola użytkownika z jQuery wewnątrz panelu UpdatePanel

To nie jest bezpośrednia odpowiedź na pytanie, ale poskładałem To rozwiązanie, czytając odpowiedzi, które znalazłem tutaj, i pomyślałem, że ktoś może uznać to za przydatne.

Próbowałem użyć ogranicznika jQuery textarea wewnątrz kontrolki użytkownika. Było to trudne, ponieważ kontrola użytkownika Działa wewnątrz panelu UpdatePanel i traciła swoje powiązania podczas wywołania zwrotnego.

Gdyby to była tylko strona, odpowiedzi tutaj zastosowałby się bezpośrednio. Jednak kontrolki użytkownika nie mają bezpośredniego dostępu do tagu head, ani nie mają bezpośredniego dostępu do Panelu UpdatePanel, jak zakładają niektóre odpowiedzi.

W końcu umieściłem ten blok skryptów w górnej części znaczników mojej kontroli użytkownika. Dla początkowego wiązania używa $(document).gotowy, a następnie korzysta z prm.add_endRequest stamtąd:

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

Upgrade do jQuery 1.3 i użyj:

$(function() {

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

});

Uwaga: live działa z większością wydarzeń, ale nie wszystkie. Pełna lista znajduje się w dokumentacji .

Możesz też spróbować:

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

, ponieważ pageLoad() jest ASP.NET Zdarzenie ajax, które jest wykonywane za każdym razem, gdy strona jest ładowana po stronie klienta.

Moja odpowiedź?

function pageLoad() {

  $(document).ready(function(){

Itd.

Działał jak urok, gdzie wiele innych rozwiązań zawiodło nędznie.

Użyłbym jednego z następujących podejść:

1. Zamknąć powiązanie zdarzeń w funkcji i uruchamiać je za każdym razem, gdy aktualizujesz stronę. Zawsze można zawrzeć powiązanie zdarzeń z określonymi elementami, aby nie wiązać zdarzeń wielokrotnie z tymi samymi elementami.

2. Użyj wtyczki livequery , która w zasadzie wykonuje metodę pierwszą dla ciebie automatycznie-magicznie. Twoje preferencje mogą się różnić w zależności od ilości kontroli nad wydarzeniem Wiązanie.

To mi pomogło:

$(document).ready(function() {

    // Do something exciting

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

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

});

Funkcja pageLoad() jest bardzo niebezpieczna w tej sytuacji. Zdarzenia mogą być łączone wielokrotnie. Też bym się trzymał z daleka .live() dołącza się do elementu dokumentu i musi przemierzać całą stronę (powoli i gównianie).

Najlepszym rozwiązaniem jakie widziałem do tej pory jest użycie jQuery .funkcja delegate() na opakowaniu poza panelem aktualizacji i wykorzystuje bubbling. Poza tym, zawsze można podłączyć obsługę za pomocą biblioteki Ajax Microsoftu, która został zaprojektowany do pracy z UpdatePanels.

Gdy $(document).ready(function (){...}) nie działa po poście strony, użyj funkcji JavaScript pageLoad w Asp.strona jak następuje:

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

Miałem podobny problem i okazało się, że sposób, który działał najlepiej było polegać na Event Bubbling i delegacja zdarzeń, aby poradzić sobie z tym. Miłą rzeczą w delegowaniu zdarzeń jest to, że po skonfigurowaniu nie musisz ponownie dodawać zdarzeń po aktualizacji AJAX.

To, co robię w moim kodzie, to ustawianie delegata na elemencie nadrzędnym panelu aktualizacji. Ten element nadrzędny nie jest zastępowany podczas aktualizacji i dlatego powiązanie zdarzeń nie ma wpływu.

Istnieje wiele dobrych artykułów i wtyczek do obsłuż delegację zdarzeń w jQuery, a funkcja prawdopodobnie zostanie upieczona w wydaniu 1.3. Artykuł / wtyczka, której używam w celach informacyjnych to:

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

Kiedy zrozumiesz, co się dzieje, myślę, że znajdziesz to znacznie bardziej eleganckie rozwiązanie, które jest bardziej niezawodne niż pamiętanie o ponownym powiązaniu zdarzeń po każdej aktualizacji. Ma to również dodatkową zaletę, że daje jedno zdarzenie do rozłączenia, gdy strona jest rozładowany.

FWIW, doświadczyłem podobnego problemu w / mootools. Ponowne dołączanie moich zdarzeń było poprawnym posunięciem, ale trzeba było to zrobić pod koniec request..eg

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

Po prostu coś, o czym należy pamiętać, jeśli beginRequest spowoduje, że otrzymasz wyjątki null reference JS.

Cheers

Jest to świetna wtyczka do użytku z panelami aktualizacji:

Http://updatepanelplugin.codeplex.com/

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

Funkcja pageLoad jest idealna do tego przypadku, ponieważ działa przy początkowym ładowaniu strony i każdym asynchronicznym postbacku updatepanel. Po prostu musiałem dodać metodę unbind, aby jQuery działało na postach UpdatePanel.

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

Moja odpowiedź opiera się na wszystkich powyższych komentarzach ekspertów, ale poniżej znajduje się następujący kod, który każdy może użyć, aby upewnić się, że na każdym postbacku i na każdym asynchronicznym postbacku kod JavaScript będzie nadal wykonywany.

w moim przypadku miałem kontrolę użytkownika na stronie. Wystarczy wkleić poniższy kod do kontrolki użytkownika.

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

Panel aktualizacji zawsze zastępuje twój Jquery wbudowanymi skryptami Scriptmanagera po każdym załadowaniu. Lepiej, jeśli używasz takich metod instancji pageRequestManager...

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

Użyj poniższego skryptu i odpowiednio Zmień treść skryptu.

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

W odpowiedzi na odpowiedź Briana Mackaya:

Wstrzykuję JavaScript do mojej strony za pomocą ScriptManager zamiast umieszczać go bezpośrednio w HTML kontrolera UserControl. W moim przypadku muszę przewijać do formularza, który jest widoczny po zakończeniu I powrocie Panelu UpdatePanel. To jest w kodzie za plikiem. W moim przykładzie utworzyłem już zmienną prm na głównej stronie zawartości.

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