Unterschied zwischen .on ('click') und .click ()
Antworten:
Ich denke, der Unterschied liegt in den Nutzungsmustern.
Ich würde es vorziehen , .onüber .clickweil erstere kann weniger Speicher und arbeiten für dynamisch hinzugefügte Elemente verwenden.
Betrachten Sie das folgende HTML:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>wo wir neue Buttons über hinzufügen
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});und will "Alarm!" einen Alarm anzeigen. Wir können dafür entweder "click" oder "on" verwenden.
Wenn wir verwenden click
$("button.alert").click(function() {
alert(1);
});Mit dem oben genannten wird ein separater Handler für jedes einzelne Element erstellt , das dem Selektor entspricht. Das bedeutet
- Viele übereinstimmende Elemente würden viele identische Handler erstellen und somit den Speicherbedarf erhöhen
- Dynamisch hinzugefügte Elemente haben keinen Handler - dh im obigen HTML-Code wird der neu hinzugefügte "Alert!" Schaltflächen funktionieren nur, wenn Sie den Handler neu binden.
Wenn wir verwenden .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});mit dem oben genannten einen einzigen Handler für alle Elemente , die zu Ihrer Auswahl passen, einschließlich der dynamisch erstellten.
... ein weiterer Grund zu verwenden .on
Wie Adrien weiter unten kommentierte, .onsind Ereignisse mit Namespace ein weiterer Grund für die Verwendung .
Wenn Sie einen Handler hinzufügen, .on("click", handler)entfernen Sie ihn normalerweise, .off("click", handler)wodurch genau dieser Handler entfernt wird. Dies funktioniert natürlich nur, wenn Sie einen Verweis auf die Funktion haben. Was ist, wenn Sie dies nicht tun? Sie verwenden Namespaces:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });mit Entbindung über
$("#element").off("click.someNamespace");on('click' ...), siehe stackoverflow.com/a/3973060/759452, d. h. on('click.darkenallothersections' ...)und gleichzeitig haben on('click.displaynextstep' ...), dann kann ich nur diejenige lösen, die ich mit benutze.unbind('click.displaynextstep')
on()ist der Trend in jQuery. Ich musste auf aktualisieren $(window).load(function() {});, $(window).on("load", function (e) {})als ich auf jQuery 3 aktualisiert habe.
Gibt es einen Unterschied zwischen dem folgenden Code?
Nein, es gibt keinen funktionalen Unterschied zwischen den beiden Codebeispielen in Ihrer Frage. .click(fn)ist eine "Verknüpfungsmethode" für .on("click", fn). Aus der Dokumentation für.on() :
Für einige Ereignisse gibt es Kurzmethoden, mit denen Ereignishandler
.click()angehängt oder ausgelöst werden können. Eine vollständige Liste der Kurzmethoden finden Sie in der Ereigniskategorie .
Beachten Sie, dass es sich dadurch .on()unterscheidet, .click()dass delegierte Ereignishandler durch Übergeben eines selectorParameters erstellt werden können, während .click()dies nicht der Fall ist. Wenn .on()es ohne selectorParameter aufgerufen wird, verhält es sich genauso wie .click(). Wenn Sie eine Ereignisdelegierung wünschen, verwenden Sie .on().
selectorParameters angezeigt . Wenn Sie .on()ohne selectorParameter aufrufen , gibt es keine Leistungsverbesserung gegenüber der Verwendung .click().
.on()ist die empfohlene Methode, um alle Ihre Ereignisbindungen ab jQuery 1.7 durchzuführen. Es rollt alle Funktionen von beiden .bind()und .live()in eine Funktion, die das Verhalten ändert, wenn Sie verschiedene Parameter übergeben.
Wie Sie Ihr Beispiel geschrieben haben, gibt es keinen Unterschied zwischen den beiden. Beide binden einen Handler an das clickEreignis von #whatever. on()bietet zusätzliche Flexibilität, damit Sie Ereignisse, die von Kindern von ausgelöst werden, #whateveran eine einzelne Handlerfunktion delegieren können , wenn Sie dies wünschen.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()tut? Dies scheint auch im Widerspruch zu den anderen Antworten zu stehen, die besagen, dass es nur die Funktionalität von .click()hat und daher nicht für zukünftige Ereignisse gilt.
.on()kann es tun, was .click()tut und was .bind()und .live()tun - es hängt davon ab, mit welchen Parametern Sie es aufrufen. (Einige andere Antworten erwähnten dies ebenfalls.) Beachten Sie jedoch, dass "An alle Links in #whatever binden" nicht das .live()ist, was es tut, sondern das, was es .delegate()tut. .live()bindet an alle im Inneren, documentanstatt Sie den Container angeben zu lassen. Hinweis .live()ist ab jQuery 1.7 ebenfalls veraltet.
Wie in den anderen Antworten erwähnt:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })Beachten Sie jedoch, dass dies .on()mehrere andere Parameterkombinationen unterstützt, die .click()dies nicht tun, sodass die Ereignisdelegierung (Ersetzen .delegate()und .live()) verarbeitet werden kann.
(Und offensichtlich gibt es andere ähnliche Verknüpfungsmethoden für "Keyup", "Focus" usw.)
Der Grund, warum ich eine zusätzliche Antwort poste, ist zu erwähnen, was passiert, wenn Sie .click()ohne Parameter aufrufen :
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");Beachten Sie, dass Sie bei .trigger()direkter Verwendung auch zusätzliche Parameter oder ein jQuery-Ereignisobjekt übergeben können, mit denen Sie nicht arbeiten können .click().
Ich wollte auch erwähnen, dass, wenn Sie sich den jQuery-Quellcode (in jquery-1.7.1.js) ansehen, Sie sehen, dass die Funktion .click()(oder .keyup()usw.) intern tatsächlich .on()oder aufruft .trigger(). Dies bedeutet natürlich, dass Sie sicher sein können, dass sie tatsächlich das gleiche Ergebnis erzielen, aber es bedeutet auch, dass die Verwendung .click()ein wenig mehr Aufwand verursacht - unter den meisten Umständen nichts, worüber Sie sich Sorgen machen oder darüber nachdenken müssen, aber theoretisch könnte dies unter außergewöhnlichen Umständen von Bedeutung sein.
BEARBEITEN: Beachten .on()Sie schließlich, dass Sie mehrere Ereignisse in einer Zeile an dieselbe Funktion binden können, z.
$("#whatever").on("click keypress focus", function(){});.click().)
Sie scheinen gleich zu sein ... Dokumentation über die Funktion click () :
Diese Methode ist eine Verknüpfung für .bind ('click', Handler)
Dokumentation über die Funktion on () :
Ab jQuery 1.7 bietet die .on () -Methode alle Funktionen, die zum Anhängen von Ereignishandlern erforderlich sind. Hilfe beim Konvertieren von älteren jQuery-Ereignismethoden finden Sie unter .bind (), .delegate () und .live (). Informationen zum Entfernen von mit .on () gebundenen Ereignissen finden Sie unter .off ().
.clickvs besser ist als der andere.on
.click Ereignisse funktionieren nur, wenn das Element gerendert wird, und werden nur an Elemente angehängt, die geladen werden, wenn das DOM bereit ist.
.on Ereignisse werden dynamisch an DOM-Elemente angehängt. Dies ist hilfreich, wenn Sie ein Ereignis an DOM-Elemente anhängen möchten, die auf Ajax-Anforderung oder etwas anderem gerendert werden (nachdem das DOM bereit ist).
Hier erhalten Sie eine Liste mit verschiedenen Möglichkeiten, das Klickereignis anzuwenden. Sie können entsprechend als geeignet auswählen oder, wenn Ihr Klick nicht funktioniert, einfach eine Alternative aus diesen ausprobieren.
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})Sie haben jetzt click () veraltet, also am besten mit on ('click')
Soweit aus dem Internet und einigen Freunden gelernt, wird .on () verwendet, wenn Sie Elemente dynamisch hinzufügen. Aber als ich es auf einer einfachen Anmeldeseite verwendete, auf der das Klickereignis AJAX an node.js senden und bei der Rückkehr neue Elemente anhängen sollte, begann es, Multi-AJAX-Aufrufe aufzurufen. Als ich es in click () geändert habe, ist alles richtig gelaufen. Eigentlich war ich vorher nicht mit diesem Problem konfrontiert.
NEUE ELEMENTE
Als Ergänzung zu den oben genannten umfassenden Antworten, um kritische Punkte hervorzuheben, wenn der Klick an neue Elemente angehängt werden soll:
- Elemente, die vom ersten Selektor ausgewählt wurden, z. B. $ ("body"), müssen zum Zeitpunkt der Deklaration vorhanden sein, da sonst nichts angehängt werden kann.
- Sie müssen die drei Argumente in der Funktion .on () verwenden, einschließlich des gültigen Selektors für Ihre Zielelemente als zweites Argument.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- es ist effektiver als $ ('. UPDATE'). click (function () {});
- Es kann weniger Speicher verbrauchen und für dynamisch hinzugefügte Elemente arbeiten.
- Einige Zeit dynamisch abgerufene Daten mit der Schaltfläche Bearbeiten und Löschen erzeugen zum Zeitpunkt der Bearbeitung oder Löschung von
$(document).on('click','.UPDATE',function(){ });Daten von Zeilendaten in Form kein JQuery-Ereignis . Diese Zeit funktioniert effektiv wie die gleichen abgerufenen Daten mithilfe von jquery. Schaltfläche funktioniert zum Zeitpunkt der Aktualisierung oder Löschung nicht:
