webentwicklung-frage-antwort-db.com.de

Unterschied zwischen .on ("click") und .click ()

Gibt es einen Unterschied zwischen dem folgenden Code?

$('#whatever').on('click', function() {
     /* your code here */
});

und 

$('#whatever').click(function() {
     /* your code here */
});
462
bgcode

Ich denke, der Unterschied liegt in den Nutzungsmustern. 

Ich würde .on gegenüber .click vorziehen, da der frühere weniger weniger Speicherplatz benötigt und für dynamisch hinzugefügte Elemente funktioniert.

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 hinzufügen

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

und will "Alert!" eine Warnung anzeigen. Wir können entweder "click" oder "on" dafür verwenden. 


Wenn wir click verwenden

$("button.alert").click(function() {
    alert(1);
});

mit dem obigen wird ein separater - Handler für jedes einzelne Element erstellt, das mit dem Selektor übereinstimmt. Das bedeutet

  1. viele übereinstimmende Elemente würden viele identische Handler erzeugen und somit den Speicherbedarf erhöhen 
  2. dynamisch hinzugefügte Elemente haben keinen Handler, dh, in der obigen HTML-Datei wird der neu hinzugefügte "Alert!" Schaltflächen funktionieren nur, wenn Sie den Handler erneut binden.

Wenn wir .on verwenden

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

mit dem oben genannten single - Handler für alle Elemente, die Ihrem Selektor entsprechen, einschließlich der dynamisch erstellten.


... ein weiterer Grund, .on zu verwenden

Wie Adrien weiter unten kommentiert, besteht ein weiterer Grund für die Verwendung von .on in Namespace-Ereignissen. 

Wenn Sie einen Handler mit .on("click", handler) hinzufügen, entfernen Sie ihn normalerweise mit .off("click", handler), wodurch dieser Handler entfernt wird. Das funktioniert natürlich nur, wenn Sie einen Verweis auf die Funktion haben. Was passiert, wenn Sie das nicht tun? Sie verwenden Namespaces:

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

mit ungebundenem via

$("#element").off("click.someNamespace");
691
andreister

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 "Shortcut-Methode" für .on("click", fn). Aus der Dokumentation zu .on() :

Für einige Ereignisse, wie zum Beispiel .click() , gibt es Abkürzungsmethoden, mit denen Eventhandler angehängt oder ausgelöst werden können. Eine vollständige Liste der Abkürzungsmethoden finden Sie in der Kategorie events .

Beachten Sie, dass .on() sich von .click() dadurch unterscheidet, dass er delegierte Ereignishandler erstellen kann, indem Sie einen selector-Parameter übergeben, wohingegen .click() dies nicht tut. Wenn .on() ohne einen selector-Parameter aufgerufen wird, verhält es sich genauso wie .click(). Wenn Sie die Delegierung von Ereignissen wünschen, verwenden Sie .on().

32
gilly3

.on() ist die empfohlene Methode, um alle Ihre Event-Bindung ab jQuery 1.7 durchzuführen. Es führt die gesamte Funktionalität von .bind() und .live() zu einer Funktion zusammen, die das Verhalten ändert, wenn Sie verschiedene Parameter übergeben.

Wie Sie Ihr Beispiel geschrieben haben, besteht kein Unterschied zwischen den beiden. Beide binden einen Handler an das click-Ereignis von #whatever. on() bietet zusätzliche Flexibilität, wenn Sie Ereignisse, die von Kindern von #whatever ausgelöst werden, an eine einzige Handlerfunktion delegieren möchten, falls Sie dies wünschen.

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });
21
Interrobang

Wie von den anderen Antworten erwähnt:

$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

Beachten Sie jedoch, dass .on() mehrere andere Parameterkombinationen unterstützt, die .click() nicht unterstützt, wodurch die Ereignisdelegation behandelt werden kann (Überschreiben von .delegate() und .live()).

(Und natürlich gibt es andere ähnliche Verknüpfungsmethoden für "Keyup", "Fokus" 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");

Wenn Sie .trigger() direkt verwenden, können Sie auch zusätzliche Parameter oder ein jQuery-Ereignisobjekt übergeben, was Sie mit .click() nicht verwenden können.

Ich wollte auch erwähnen, dass, wenn Sie sich den jQuery-Quellcode (in jquery-1.7.1.js) ansehen, Sie feststellen, dass die Funktion .click() (oder .keyup() usw.) intern .on() oder .trigger() aufruft. Natürlich bedeutet dies, dass Sie sicher sein können, dass sie tatsächlich das gleiche Ergebnis haben, aber es bedeutet auch, dass die Verwendung von .click() ein wenig mehr Aufwand bedeutet - in den meisten Fällen nichts, worüber Sie sich Gedanken machen müssen, aber theoretisch könnte es unter außergewöhnlichen Umständen von Bedeutung sein .

BEARBEITEN: Schließlich können Sie mit .on() mehrere Ereignisse in einer Zeile an dieselbe Funktion binden, z.

$("#whatever").on("click keypress focus", function(){});
17
nnnnnn

Nein, das gibt es nicht.
.__ Der Punkt von on() ist seine anderen Überladungen und die Fähigkeit, Ereignisse zu behandeln, die keine Verknüpfungsmethoden haben.

9
SLaks

Sie scheinen gleich zu sein ... Dokumentation aus der click () Funktion:

Diese Methode ist eine Verknüpfung für .bind ('click', Handler).

Dokumentation aus der on () Funktion:

Seit jQuery 1.7 stellt die .on () -Methode alle erforderlichen Funktionen bereit zum Anhängen von Event-Handlern. Hilfe beim Konvertieren von älteren jQuery-Dateien Ereignismethoden, siehe .bind (), .delegate () und .live (). Um Ereignisse zu entfernen gebunden an .on (), siehe .off ().

8
dana

.click -Ereignisse funktionieren nur, wenn ein 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 bei einer Ajax-Anforderung oder etwas anderem gerendert werden (nachdem das DOM bereit ist).

7
Ramesh kumar

Hier erhalten Sie eine Liste mit verschiedenen Möglichkeiten, das Click-Ereignis anzuwenden. Sie können dementsprechend als günstig wählen oder wenn Ihr Klick nicht funktioniert, probieren Sie eine Alternative aus.

$('.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
})
4
Must Keem J

Sie sind jetzt click () veraltet, also am besten mit ("click")

2
James Soper

Soweit von Internet und einigen Freunden gelernt, wird .on () verwendet, wenn Sie Elemente dynamisch hinzufügen. Als ich ihn jedoch auf einer einfachen Anmeldeseite verwendete, auf der das click -Ereignis AJAX an node.js senden sollte, und bei der Rückkehr neue Elemente anhängen, begann es mit dem Aufruf von Multi-AJAX-Aufrufen. Als ich es in click () änderte, lief alles richtig. Eigentlich war ich vorher nicht mit diesem Problem konfrontiert.

1
Alper Bilgil
$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });
  1. es ist effektiver als $ ('. UPDATE'). click (function () {});
  2. es kann weniger Speicherplatz beanspruchen und für dynamisch hinzugefügte Elemente verwendet werden.
  3. in einigen Fällen erzeugen dynamische abgerufene Daten mit der Schaltfläche zum Bearbeiten und Löschen zum Zeitpunkt des Editierens OR DELETE DATA von Zeilendaten im Formular kein JQuery-Ereignis. Diese Uhrzeit funktioniert $(document).on('click','.UPDATE',function(){ }); tatsächlich mit den gleichen abgerufenen Daten unter Verwendung von Jquery. Taste funktioniert nicht zum Zeitpunkt des Updates oder Löschens:

 enter image description here

0
Devang Hire