Warum funktioniert eine jQuery-Änderungsfunktion nach dem Laden von HTML mit AJAX nicht?
Lesezeit: 4 Minuten
Ahhchuu
Ich lade ein Formular und fülle dynamisch eine Auswahl über AJAX aus einer PHP-Datei. Vor der Implementierung der dynamischen, mit AJAX gefüllten Auswahl funktioniert meine Änderungsfunktion (sie zeigt nur eine andere Eingabe an, wenn ein Benutzer „Andere“ auswählt). Jetzt funktioniert die Änderungsfunktion nicht.
Ich weiß, dass die Ready-Funktion ausgelöst wird, weil die jStepper-Funktionen ausgeführt werden. Ich habe dies mit der Änderungsfunktion innerhalb und außerhalb der Bereitschaftsfunktion versucht. Ich habe das Gefühl, dass die Änderungsfunktion geladen wird, bevor AJAX fertig ist, aber spielt das wirklich eine Rolle?
da es am nächsten an das betreffende Element bindet.
Sie sollten den Ajax-Aufruf auch in das fertige Skript einfügen, würde ich denken.
Der Grund dafür ist, dass es nichts im DOM gibt, an das man sich binden kann, wenn es instanziiert wird. Wenn Sie die .on-Datei auf diese Weise verwenden, wird sie stattdessen an das Dokument gebunden. Wenn Sie ein anderes “festes” Element hätten, das es umschließt, ist es möglicherweise besser, dieses anstelle von “Dokument” zu binden, da es wahrscheinlich eine bessere Leistung erbringen würde.
BEARBEITEN: Beachten Sie, dass Sie das Änderungsereignismanagement auch hinzufügen KÖNNTEN, nachdem Sie das Element als Teil der Ajax-Aufrufvervollständigung eingefügt haben, aber wenn Sie dies mehr als einmal tun, sollten Sie es in diesem Fall zuerst aufheben.
Das Anhängen vieler delegierter Ereignishandler am Anfang der Dokumentstruktur kann die Leistung beeinträchtigen. Jedes Mal, wenn das Ereignis auftritt, muss jQuery alle Selektoren aller angehängten Ereignisse dieses Typs mit jedem Element im Pfad vom Ereignisziel bis zum Anfang des Dokuments vergleichen. Hängen Sie für eine optimale Leistung delegierte Ereignisse an einem Dokumentspeicherort so nah wie möglich an den Zielelementen an. Vermeiden Sie die übermäßige Verwendung von document oder document.body für delegierte Ereignisse bei großen Dokumenten.
Ja! Genial, du hast es behoben. Könnten Sie vielleicht erklären, warum es so funktioniert und nicht anders?
– ahhchuu
29. März 2012 um 16:38 Uhr
Achten Sie darauf, wie viele Elemente Sie an $ (document) binden – es ist besser, an ein Element so nahe wie möglich an den Selektor zu binden (das wird natürlich nicht durch eine DOM-Modifikation ersetzt).
– Mikevoermans
29. März 2012 um 16:44 Uhr
@mikevoermans – genau deshalb habe ich den Hinweis bezüglich des näheren Elements und der Option zum Hinzufügen am Injektionspunkt hinzugefügt.
– Mark Schultheiss
29. März 2012 um 16:46 Uhr
@Sinan .live bindet anders und ist daher langsamer – es wird empfohlen, .on in der Dokumentation zu verwenden
– Mark Schultheiss
29. März 2012 um 17:26 Uhr
Ich habe ein Beispiel für eine engere Bindung der .on für dieses spezielle Beispiel angesichts der Kommentare hinzugefügt.
– Mark Schultheiss
29. März 2012 um 17:41 Uhr
Ich denke, das Element, an das Sie in der Zeile binden:
$('#ve_categoryNo').change(function() { ...
existiert noch nicht im DOM, daher wird das Ereignis nicht gebunden.
Mögliches Duplikat der Ereignisbindung für dynamisch erstellte Elemente?
– Showdev
5. Juli 2016 um 22:27 Uhr