jQuery $(document).ready und UpdatePanels?

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

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

Natürlich funktioniert dies beim ersten Laden der Seite gut, aber wenn das UpdatePanel eine teilweise Seitenaktualisierung durchführt, wird es nicht ausgeführt und die Mouseover-Effekte funktionieren nicht mehr innerhalb des UpdatePanels.

Was ist der empfohlene Ansatz, um Dinge in jQuery nicht nur beim Laden der ersten Seite zu verdrahten, sondern jedes Mal, wenn ein UpdatePanel eine teilweise Seitenaktualisierung auslöst? Sollte ich stattdessen den ASP.NET-Ajax-Lebenszyklus verwenden? $(document).ready?

Ein UpdatePanel ersetzt den Inhalt des Update-Panels bei einem Update vollständig. Das bedeutet, dass die von Ihnen abonnierten Veranstaltungen nicht mehr abonniert sind, da es neue Elemente in diesem Aktualisierungsbereich gibt.

Was ich getan habe, um dies zu umgehen, ist, die Ereignisse, die ich nach jedem Update benötige, erneut zu abonnieren. ich benutze $(document).ready() Verwenden Sie für den anfänglichen Ladevorgang dann die von Microsoft PageRequestManager (verfügbar, wenn Sie ein Update-Panel auf Ihrer Seite haben), um jedes Update erneut zu abonnieren.

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

Die PageRequestManager ist ein Javascript-Objekt, das automatisch verfügbar ist, wenn ein Update-Panel auf der Seite ist. Sie sollten nichts anderes als den obigen Code tun müssen, um ihn zu verwenden, solange sich das UpdatePanel auf der Seite befindet.

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

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

Eine bessere Option, die Sie je nach Bedarf haben, ist die Verwendung von jQuery .on(). Diese Methoden sind effizienter als das erneute Abonnieren von DOM-Elementen bei jedem Update. Lesen Sie jedoch die gesamte Dokumentation, bevor Sie diesen Ansatz verwenden, da er möglicherweise Ihren Anforderungen entspricht oder nicht. Es gibt viele jQuery-Plug-ins, deren Verwendung nicht sinnvoll wäre .delegate() oder .on()also ist es in diesen Fällen besser, wenn Sie sich erneut anmelden.

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

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

Benutzersteuerung mit jQuery in einem UpdatePanel

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-Textbereichsbegrenzer innerhalb eines Benutzersteuerelements zu verwenden. Dies war schwierig, da das Benutzersteuerelement innerhalb eines UpdatePanels ausgeführt wird und beim Rückruf seine Bindungen verliert.

Wenn dies nur eine Seite wäre, hätten die Antworten hier direkt zugetroffen. Benutzersteuerelemente haben jedoch weder direkten Zugriff auf das Head-Tag noch direkten Zugriff auf das UpdatePanel, wie einige der Antworten vermuten.

Am Ende habe ich diesen Skriptblock ganz oben in das Markup meiner Benutzersteuerung eingefügt. Für die anfängliche Bindung verwendet es $(document).ready und dann von dort aus 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>

Also … dachte nur, jemand würde gerne wissen, ob das funktioniert.

Aktualisieren Sie auf jQuery 1.3 und verwenden Sie:

$(function() {

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

});

Hinweis: Live funktioniert mit den meisten Events, aber nicht mit allen. Es gibt eine vollständige Liste in die Dokumentation.

Du könntest 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 Clientseite geladen wird.

Meine Antwort?

function pageLoad() {

  $(document).ready(function(){

usw.

Funktionierte wie ein Zauber, wo eine Reihe anderer Lösungen kläglich scheiterten.

Ich würde einen der folgenden Ansätze verwenden:

1. Kapseln Sie die Ereignisbindung in einer Funktion und führen Sie sie jedes Mal aus, wenn Sie die Seite aktualisieren. Sie können die Ereignisbindung immer auf bestimmte Elemente beschränken, um Ereignisse nicht mehrmals an dieselben Elemente zu binden.

2. Verwenden Sie die Liveabfrage Plug-in, das Methode eins automatisch für Sie ausführt. Ihre Präferenz kann variieren, je nachdem, wie viel Kontrolle Sie über die Ereignisbindung haben möchten.