Ab jQuery 1.7 sollten Sie Folgendes verwenden jQuery.fn.on
:
$(staticAncestors).on(eventName, dynamicChild, function() {});
Zuvor war der empfohlene Ansatz live()
:
$(selector).live( eventName, function(){} );
Allerdings live()
wurde in 1.7 für veraltet on()
und vollständig in 1.9 entfernt. Die live()
Unterschrift:
$(selector).live( eventName, function(){} );
... kann durch folgende on()
Unterschrift ersetzt werden:
$(document).on( eventName, selector, function(){} );
Wenn Ihre Seite beispielsweise dynamisch Elemente mit dem Klassennamen erstellt dosomething
, binden Sie das Ereignis an ein übergeordnetes Element, das bereits vorhanden ist (dies ist der Kern des Problems hier. Sie benötigen etwas, an das gebunden werden kann, und binden Sie nicht an das dynamischer Inhalt), dies kann sein (und die einfachste Option) ist document
. Bedenken Sie jedoch, dass dies document
möglicherweise nicht die effizienteste Option ist .
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});
Alle Eltern, die zum Zeitpunkt der Ereignisbindung vorhanden sind, sind in Ordnung. Zum Beispiel
$('.buttons').on('click', 'button', function(){
// do something here
});
würde gelten für
<div class="buttons">
<!-- <button>s that are generated dynamically and added here -->
</div>
Es gibt eine gute Erklärung in der Dokumentation von
jQuery.fn.on
.Zusamenfassend:
Daher muss im folgenden Beispiel
#dataTable tbody tr
vorhanden sein, bevor der Code generiert wird.Wenn neues HTML in die Seite eingefügt wird, ist es vorzuziehen, delegierte Ereignisse zu verwenden, um einen Ereignishandler anzuhängen, wie im Folgenden beschrieben.
Delegierte Ereignisse haben den Vorteil, dass sie Ereignisse von untergeordneten Elementen verarbeiten können, die zu einem späteren Zeitpunkt zum Dokument hinzugefügt werden. Wenn die Tabelle beispielsweise vorhanden ist, die Zeilen jedoch dynamisch mithilfe von Code hinzugefügt werden, wird dies wie folgt behandelt:
Zusätzlich zu ihrer Fähigkeit, Ereignisse für noch nicht erstellte untergeordnete Elemente zu verarbeiten, besteht ein weiterer Vorteil delegierter Ereignisse darin, dass sie möglicherweise einen viel geringeren Overhead verursachen, wenn viele Elemente überwacht werden müssen. In einer Datentabelle mit 1.000 Zeilen wird im
tbody
ersten Codebeispiel ein Handler an 1.000 Elemente angehängt.Ein Ansatz für delegierte Ereignisse (das zweite Codebeispiel) hängt einen Ereignishandler nur an ein Element an, das
tbody
, und das Ereignis muss nur eine Ebene hochblasen (von angeklickttr
bistbody
).Hinweis: Delegierte Ereignisse funktionieren nicht für SVG .
quelle
tr
zu einem geeigneten Selektor gewechselt wird , z. B.'input[type=checkbox]'
würde dies automatisch für neu eingefügte Zeilen behandelt?Dies ist eine reine JavaScript- Lösung ohne Bibliotheken oder Plugins:
wo
hasClass
istLive demo
Der Kredit geht an Dave und Sime Vidas
Mit modernerem JS
hasClass
kann Folgendes implementiert werden:quelle
Element.classList
wird von älteren Browsern nicht unterstützt. Zum Beispiel IE <9.Sie können Objekten Ereignisse hinzufügen, wenn Sie sie erstellen. Wenn Sie mehreren Objekten zu unterschiedlichen Zeiten dieselben Ereignisse hinzufügen, ist das Erstellen einer benannten Funktion möglicherweise der richtige Weg.
quelle
Sie können Ihren Ereignisbindungsaufruf einfach in eine Funktion einbinden und dann zweimal aufrufen: einmal im Dokument bereit und einmal nach Ihrem Ereignis, bei dem die neuen DOM-Elemente hinzugefügt werden. Wenn Sie dies tun, sollten Sie vermeiden, dasselbe Ereignis zweimal an die vorhandenen Elemente zu binden, sodass Sie entweder die vorhandenen Ereignisse aufheben oder (besser) nur an die neu erstellten DOM-Elemente binden müssen. Der Code würde ungefähr so aussehen:
quelle
Versuchen Sie,
.live()
anstelle von zu verwenden.bind()
; Das.live()
wird.hover
an Ihr Kontrollkästchen gebunden, nachdem die Ajax-Anforderung ausgeführt wurde.quelle
live()
wurde in Version 1.7 zugunsten vonon
Version 1.9 veraltet und in Version 1.9 gelöscht.Ereignisbindung für dynamisch erstellte Elemente
Einzelelement:
Untergeordnetes Element:
Beachten Sie die hinzugefügten
*
. Für alle untergeordneten Elemente dieses Elements wird ein Ereignis ausgelöst.Ich habe bemerkt, dass:
Es funktioniert nicht mehr, aber es hat vorher funktioniert. Ich habe jQuery von Google CDN verwendet , weiß aber nicht, ob sie es geändert haben.
quelle
Mit der live () -Methode können Sie Elemente (auch neu erstellte) an Ereignisse und Handler binden, z. B. das Ereignis onclick.
Hier ist ein Beispielcode, den ich geschrieben habe, in dem Sie sehen können, wie die live () -Methode ausgewählte Elemente, auch neu erstellte, an Ereignisse bindet:
quelle
Ich bevorzuge die Verwendung des Selektors und wende ihn auf das Dokument an.
Dies bindet sich an das Dokument und gilt für die Elemente, die nach dem Laden der Seite gerendert werden.
Zum Beispiel:
quelle
selector
Variable zu wickeln , wenn es entweder eine Zeichenfolge oder ein Element-Objekt enthalten muss, das Sie direkt an das Argument vonon()
Eine andere Lösung besteht darin, den Listener beim Erstellen des Elements hinzuzufügen. Anstatt den Hörer in den Körper zu setzen, setzen Sie den Hörer in dem Moment in das Element, in dem Sie ihn erstellen:
quelle
myElement.append('body');
muss seinmyElement.appendTo('body');
. Auf der anderen Seite istmyElement
es einfacher und kürzer , wenn die weitere Verwendung der Variablen nicht erforderlich ist :$('body').append($('<button/>', { text: 'Go to Google!' }).bind( 'click', goToGoogle));
Versuchen Sie es so -
quelle
Beachten Sie die Klasse "MAIN", in der das Element platziert ist, z.
Im obigen Szenario ist das MAIN-Objekt, das von jQuery überwacht wird, "Container".
Dann werden Sie im Grunde Elemente Namen unter Container haben wie
ul
,li
, undselect
:quelle
Dies erfolgt durch Ereignisdelegation . Das Ereignis wird an das Wrapper-Class-Element gebunden, jedoch an das Selector-Class-Element delegiert. So funktioniert es.
Hinweis:
Wrapper-Class-Element kann alles sein, z. Dokument, Körper oder Ihre Hülle. Wrapper sollte bereits vorhanden sein . Muss
selector
jedoch nicht unbedingt beim Laden der Seite angezeigt werden. Es kann später kommen und das Ereignis wirdselector
ohne Fehler weitergebunden .quelle
Du könntest benutzen
oder
Diese beiden Methoden sind äquivalent, haben jedoch eine unterschiedliche Reihenfolge der Parameter.
Siehe: jQuery-Delegatenereignis
quelle
delegate()
ist jetzt veraltet. Benutze es nicht.Sie können ein Ereignis an ein Element anhängen, wenn es dynamisch mit erstellt wird
jQuery(html, attributes)
.quelle
Aus diesem Grund reagieren dynamisch erstellte Elemente nicht auf Klicks:
Um dieses Problem zu umgehen, müssen Sie alle Klicks abhören und das Quellelement überprüfen:
Dies wird als "Ereignisdelegation" bezeichnet. Gute Nachrichten, es ist eine integrierte Funktion in jQuery :-)
quelle
Jeder p Arent , das existiert das Ereignis zu dem Zeitpunkt gebunden ist , und wenn Ihre Seite wurde dynamisch Elemente zu schaffen mit der Klassennamen Taste würden Sie das Ereignis zu einem Elternteil binden , die bereits vorhanden ist
quelle
Binden Sie das Ereignis an ein übergeordnetes Element, das bereits vorhanden ist:
quelle
Verwenden Sie die
.on()
Methode von jQuery http://api.jquery.com/on/ , um Ereignishandler an das Live-Element anzuhängen.Auch ab Version 1.9 wird die
.live()
Methode entfernt.quelle
Ich bevorzuge es, Ereignis-Listener modular bereitzustellen, anstatt einen
document
Level-Ereignis-Listener zu erstellen. Also, ich mag unten. Beachten Sie, dass Sie ein Element nicht mit demselben Ereignis-Listener überzeichnen können. Machen Sie sich also keine Sorgen, dass Sie einen Listener mehr als einmal anhängen müssen - nur einer bleibt hängen.quelle
Eine weitere flexible Lösung zum Erstellen von Elementen und zum Binden von Ereignissen ( Quelle )
Hinweis: Dadurch wird für jedes Element eine Ereignishandlerinstanz erstellt (kann die Leistung beeinträchtigen, wenn sie in Schleifen verwendet wird).
quelle
quelle
Ich suchte nach einer Lösung, um problemlos dynamisch hinzugefügte Elemente zu erhalten
$.bind
und zu$.unbind
arbeiten.As on () macht den Trick, Ereignisse anzuhängen, um eine falsche Bindung zu denen zu erzeugen, zu denen ich gekommen bin:
quelle