jQuery $(document).ready und UpdatePanels?

Question

Ich verwende jQuery, um einige Mouseover-Effekte auf Elemente zu verdrahten, die innerhalb eines UpdatePanel sind. Die Ereignisse sind gebunden in $(document).ready . Zum Beispiel:

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

Natürlich funktioniert dies beim ersten Laden der Seite, aber wenn das UpdatePanel eine teilweise Aktualisierung der Seite vornimmt, wird es nicht ausgeführt und die Mouseover-Effekte funktionieren nicht mehr im UpdatePanel.

Was ist der empfohlene Ansatz für die Verdrahtung von Sachen in jQuery nicht nur auf die erste Seite laden, aber jedes Mal ein UpdatePanel eine teilweise Seitenaktualisierung auslöst? Sollte ich die ASP.NET ajax Lebenszyklus anstelle von $(document).ready ?

Answer 1

Ich hatte ein ähnliches Problem und fand heraus, dass es am besten funktionierte, wenn ich mich auf Event Bubbling und Event Delegation verließ, um das Problem zu lösen. Das Schöne an der Ereignisdelegation ist, dass Sie nach der Einrichtung die Ereignisse nach einem AJAX-Update nicht neu binden müssen.

Was ich in meinem Code tue, ist die Einrichtung eines Delegaten für das übergeordnete Element des Aktualisierungsfelds. Dieses übergeordnete Element wird bei einer Aktualisierung nicht ersetzt und daher ist die Ereignisbindung davon nicht betroffen.

Es gibt eine Reihe von guten Artikeln und Plugins zur Behandlung von Event-Delegation in jQuery und die Funktion wird wahrscheinlich in die 1.3 Release gebacken werden. Der Artikel/Plugin, die ich als Referenz verwenden, ist:

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

Wenn Sie erst einmal verstanden haben, was passiert, werden Sie feststellen, dass dies eine viel elegantere Lösung ist, die zuverlässiger ist, als sich daran zu erinnern, Ereignisse nach jeder Aktualisierung neu zu binden. Dies hat auch den zusätzlichen Vorteil, dass Sie ein Ereignis zu entbinden, wenn die Seite entladen wird.

Answer 2

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

Die pageLoad-Funktion ist perfekt für diesen Fall, da sie beim ersten Laden der Seite und bei jedem asynchronen Postback von updatepanel ausgeführt wird. Ich musste nur die unbind Methode hinzufügen, um die Jquery Arbeit auf updatepanel Postbacks zu machen.

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

Answer 3

Meine Antwort basiert auf den Kommentaren der Experten oben, aber unten ist der folgende Code, den jeder verwenden kann, um sicherzustellen, dass bei jedem Postback und bei jedem asynchronen Postback der JavaScript-Code weiterhin ausgeführt wird.

In meinem Fall hatte ich eine Benutzerkontrolle innerhalb einer Seite. Fügen Sie einfach den unten stehenden Code in Ihre Benutzerkontrolle ein.

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

Answer 4

Update Panel ersetzt Ihre Jquery-Skripte nach jedem Laden durch die Skripte des eingebauten Scriptmanagers. Seine besser, wenn Sie pageRequestManager Instanz Methoden wie diese verwenden...

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

es wird gut funktionieren ...

Answer 5

Verwenden Sie das folgende Skript und ändern Sie den Text des Skripts entsprechend.

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