Fügen Sie jQuery-Event-Handler dynamisch zu dynamischem HTML hinzu

8

Ich habe einen Div-Abschnitt, den ich dynamisch über jQuery ajax bevölkere:

%Vor%

Wo Daten eine Menge verschachtelter divs mit unterschiedlichen IDs sind.

Ich habe auch einen jQuery-Code, der die divs in eine Baumansicht mit einer +/- Expand / Collapse und dynamischen Datenpopulation verwandelt:

%Vor%

Das Problem ist, wenn ich die Divs in die Hauptansicht der Baumansicht einfügen, alles gut. Wenn ich den exakt gleichen Text dynamisch erstelle, habe ich ihn ja verglichen, den Expand / Collapse & Amp; dynamische Datenpopulation funktioniert nicht; Ich kann jedoch mein korrektes Div-Layout auf meiner Seite sehen.

Ich vermute, dass ich das Click-Event & amp; addClass wenn ich das mache

$ ('# Baumansicht'). append (data.d);

Aber ich kann nicht herausfinden, wie.

    
mike 24.01.2011, 19:09
quelle

4 Antworten

9

Wenn Sie Elemente dynamisch zum DOM hinzufügen, funktionieren vorhandene Ereignisbehandlungsroutinen, die an einen Selektor gebunden sind, nicht (z. B. click ).

Sie müssen die Funktion live verwenden, damit Ereignisse von neu erstellten DOM-Elementen erfasst werden.

>

Es sollte beachtet werden ( wie es war die Kommentare von Zach L ), dass ab jQuery 1.7 live wurde zugunsten von on abgelehnt. Der allgemeine Hinweis ist der gleiche (Tracking dynamischer Elemente), nur der Mechanismus ( on vs live ) hat sich geändert.

    
casperOne 24.01.2011, 19:13
quelle
4

live() ist veraltet.

Von den Dokumenten :

Verwenden Sie .on() , um Ereignishandler anzuhängen. Benutzer älterer Versionen von jQuery sollten .delegate() gegenüber .live() verwenden.

    
Zach Lysobey 09.03.2012 21:06
quelle
2

Sie können delegate() oder live() , um Event-Handler an dynamische Elemente zu binden. In den meisten Fällen ist delegate() die effizienteste Route, es sei denn, Sie können nicht vorhersagen, wo die dynamischen Elemente im DOM vorhanden sind.

    
Dominic Barnes 24.01.2011 19:46
quelle
1

Das Erstellen von dynamischen anklickbaren Objekten hat mich auch für einige Zeit befummelt. Ich konnte die delegate () -Funktion auch nicht ausführen. Irgendwann habe ich dieses Beispiel gefunden Ссылка

und änderte es zu

var buttonClear = $('#formResult').parent().find('#formMessage'); buttonClear.append("<input type='button' value='Clear message' id='clear'>");

$("#clear").click(function() {     // Klicken Sie hier, um auf die Aktion zu klicken });

Das formResult ist eine Formular-ID, die sich bereits auf der Seite befindet, und formMessage ist eine dynamisch hinzugefügte Nachricht, die nach dem Übermitteln des Formulars angezeigt wird. Das Skript fügt eine Schaltfläche am Ende des Formulars hinzu, um die Nachricht zu löschen.

    
Brian Moreau 28.03.2012 20:52
quelle

Tags und Links