Lösung für das Onclick -Ereignis -Ungültigkeit nach JQuery Ajax Loading

Dieser Artikel zielt darauf ab, das Problem zu lösen, dass das Onclick -Ereignis nach dynamisch geladenem Inhalt mit JQuery und AJAX läuft. Normalerweise liegt dies daran, dass Ereignisse an das anfängliche DOM -Element gebunden sind und neue Elemente, die von AJAX geladen werden, keine Ereignishörer gebunden sind. In diesem Artikel wird erläutert, wie Sie mit Ereignisdelegierten dieses Problem beheben und sicherstellen, dass dynamisch geladene Inhalte auch auf Klickereignisse reagieren können.

Bei der Entwicklung von Webanwendungen mit JQuery und AJAX begegnen Sie häufig die Notwendigkeit, Inhalte dynamisch zu laden. Klicken Sie beispielsweise in einer Tabelle auf eine Zelle, um Daten über die AJAX -Anforderung zu erhalten und den Tabelleninhalt zu aktualisieren. Ein häufiges Problem ist jedoch, dass das zuvor gebundene Onclick -Ereignis fehlschlägt, wenn neue Inhalte mit $ .Ajax geladen werden. Dies liegt daran, dass der Ereignishörer nur an das anfänglich geladene DOM -Element gebunden ist, während das neu geladene Element das Ereignis nicht bindet.

Problemanalyse:

Die Wurzel des Problems liegt in der Bindung von Ereignissen direkt an bestimmte Elemente. Wenn diese Elemente entfernt werden (z. B. über leer () oder html ()) und durch neue Elemente ersetzt werden, geht die ursprüngliche Ereignisbindung verloren.

Lösung: Ereignisdelegation

Der beste Weg, um dieses Problem zu lösen, besteht darin, Ereignisdelegierte zu verwenden. Ereignisdelegierte verwenden den Ereignisblasenmechanismus, um Ereignishörer an das Root -Element (Dokument) oder sein übergeordnetes Element des Dokuments zu binden. Wenn ein Kinderelement ein Ereignis auslöst, blüht das Ereignis entlang des Dom -Baumes nach oben, bis es vom Hörer des gebundenen Ereignisses erfasst wird.

Implementierungsschritte:

1. Ändern Sie den Ereignisbindungscode:

   Binden Sie den Ereignishörer an das Dokumentobjekt und verwenden Sie den Selektor, um das Element zum Anhören anzugeben (z. B. #NewStable TD).

    $ (Dokument) .on ('Click', '#NewStable TD', Funktion (e) {
       E.PreventDefault ();
       $ .ajax ({{{
           Typ: "Post",
           URL: 'ajax.php',
           Daten: 'Daten',
           Beforesend: function () {
               $ ('#lader'). show ();
           },
           Erfolg: Funktion (Antwort) {
               $ ('#Newstable tbody'). Leer ();
               $ ('#Newstable tbody'). Append (Antwort);
           },
           Fehler: Funktion (xhr, Status, Fehler) {
               console.log (Fehler);
           }
       });
   });

   erklären:

   • $ (dokument) .on ('click', '#NewStable TD', Funktion (e) {...}); Diese Codezeile bindet den Klickereignislistener an das Dokumentobjekt.
   • '#NewStable TD' ist ein Selektor, der angibt, dass das zu hörene Element alle TD -Elemente in der Tabelle mit ID NewStable ist.
   • Wenn Sie auf ein TD -Element in der Tabelle #NewStable klicken, sprudelt die Ereignis -Ereignis -Listener das Dokumentobjekt und löst dann den gebundenen Ereignislistener aus.

2. HTML -Struktur (Beispiel):

   Überschrift	Hauptkategorie
   Daten 1	Daten 2

3. AJAX -Antwort (Beispiel):

   Der vom Skript ajax.php zurückgegebene HTML -Code wird verwendet, um den Tabelleninhalt zu aktualisieren.

    <tr>
       <td class="2className1"> Neue Daten 1 </td>
       <td class="2className2"> Neue Daten 2 </td>
   </tr>

Anmerkungen:

• Auswahloptimierung: Je genauer der Selektor, desto höher ist die Leistung. Wenn möglich, binden Sie den Ereignisdelegieren an das übergeordnete Element näher am Zielelement und nicht an das Dokument. Zum Beispiel an #NewStable binden.
• Vermeiden Sie eine Überdosierung: Delegieren Sie nicht alle Ereignisse an das Dokumentobjekt, was die Leistung beeinträchtigen kann.
• Dynamische Inhaltsinitialisierung: Wenn AJAX lädt, enthält Inhalt JavaScript -Komponenten, die initialisiert werden müssen, initialisieren Sie ihn in der Erfolgs -Rückruffunktion.

Zusammenfassen:

Die Verwendung von Ereignisdelegierten ist eine effektive Möglichkeit, den Fehler des Onclick -Ereignisses nach Ajax -Lasten zu beheben. Durch die Bindung des Ereignishörers an das übergeordnete Element- oder Dokumentobjekt können Sie sicherstellen, dass dynamisch geladener Inhalte auch auf Ereignisse reagieren kann. Denken Sie daran, dass die Auswahl des richtigen Delegierten -Ziel- und Optimierungswählers die Leistung verbessern kann.

Das obige ist der detaillierte Inhalt vonLösung für das Onclick -Ereignis -Ungültigkeit nach JQuery Ajax Loading. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!