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

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().

.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() { ... });

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(){});

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.

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 ().

.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).

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
})

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

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.

$('.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: