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

Ein UpdatePanel ersetzt den Inhalt des Update-Panels bei einer Aktualisierung vollständig. Das bedeutet, dass die Ereignisse, die Sie abonniert haben, nicht mehr abonniert sind, da sich neue Elemente in diesem UpdatePanel befinden.

Um dieses Problem zu umgehen, habe ich mich nach jeder Aktualisierung erneut für die benötigten Ereignisse angemeldet. Ich verwende $(document).ready() für die anfängliche Belastung, dann verwenden Sie Microsofts PageRequestManager (verfügbar, wenn Sie ein Aktualisierungspanel auf Ihrer Seite haben), um sich bei jeder Aktualisierung neu anzumelden.

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

El PageRequestManager ist ein Javascript-Objekt, das automatisch verfügbar ist, wenn sich ein Aktualisierungsfeld auf der Seite befindet. Solange sich das UpdatePanel auf der Seite befindet, sollten Sie außer dem obigen Code nichts weiter tun müssen, um es zu verwenden.

Wenn Sie eine detailliertere Steuerung benötigen, übergibt dieses Ereignis Argumente ähnlich wie .NET-Ereignisse Argumente übergeben (sender, eventArgs) damit Sie sehen können, was das Ereignis ausgelöst hat, und nur bei Bedarf neu binden.

Hier finden Sie die neueste Version der Dokumentation von Microsoft: msdn.microsoft.com/.../bb383810.aspx

---

Eine bessere Option, die Sie je nach Ihren Bedürfnissen haben, ist die Verwendung der jQuery-Funktion .on() . Diese Methoden sind effizienter als das erneute Abonnieren von DOM-Elementen bei jeder Aktualisierung. Lesen Sie jedoch die gesamte Dokumentation, bevor Sie diesen Ansatz verwenden, da er Ihren Anforderungen entsprechen kann oder auch nicht. Es gibt viele jQuery-Plugins, bei denen es unvernünftig wäre, sie so umzugestalten, dass sie .delegate() o .on() In diesen Fällen ist es besser, wenn Sie sich neu anmelden.

Answer 2

<script type="text/javascript">

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

Der Bereich, der aktualisiert werden soll.

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

Answer 3

Benutzersteuerung mit jQuery innerhalb eines UpdatePanels

Dies ist keine direkte Antwort auf die Frage, aber ich habe diese Lösung zusammengestellt, indem ich die Antworten gelesen habe, die ich hier gefunden habe, und ich dachte, jemand könnte sie nützlich finden.

Ich habe versucht, einen jQuery-Textarea-Begrenzer innerhalb eines User Controls zu verwenden. Dies war knifflig, weil die User Control innerhalb eines UpdatePanel läuft, und es war verlieren seine Bindungen auf Callback.

Wäre dies nur eine Seite gewesen, hätten die Antworten hier direkt gelten müssen. Benutzersteuerelemente haben jedoch keinen direkten Zugriff auf den head-Tag und auch nicht auf das UpdatePanel, wie einige der Antworten vermuten lassen.

Am Ende habe ich diesen Skriptblock ganz oben in das Markup meines User Controls eingefügt. Für die anfängliche Bindung wird $(document).ready verwendet, und dann wird prm.add_endRequest von dort aus verwendet:

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

Also... Ich dachte nur, dass es jemanden interessieren könnte, dass das funktioniert.

Answer 4

Upgrade auf jQuery 1.3 und Verwendung:

$(function() {

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

});

Hinweis: Live funktioniert bei den meisten Veranstaltungen, aber nicht bei allen. Eine vollständige Liste finden Sie unter die Dokumentation .

Answer 5

Sie könnten es auch versuchen:

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

da pageLoad() ein ASP.NET-Ajax-Ereignis ist, das jedes Mal ausgeführt wird, wenn die Seite auf der Client-Seite geladen wird.