Différence entre .on ('clic') et .click ()
Y a-t-il une différence entre le code suivant?
$('#whatever').on('click', function() {
/* your code here */
});
et
$('#whatever').click(function() {
/* your code here */
});
Je pense que la différence réside dans les modèles d'utilisation.
Je préférerais .on plutôt que .click parce que l'ancien peut utilise moins de mémoire et fonctionne pour des éléments ajoutés dynamiquement.
Considérez le code HTML suivant:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>
où nous ajoutons de nouveaux boutons via
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});
et veulent "Alert!" pour afficher une alerte. Nous pouvons utiliser "click" ou "on" pour cela.
Quand on utilise click
$("button.alert").click(function() {
alert(1);
});
avec ce qui précède, un séparé gestionnaire est créé pour chaque élément qui correspond au sélecteur. Cela signifie
- de nombreux éléments correspondants créeraient de nombreux gestionnaires identiques et augmenteraient ainsi l'empreinte mémoire
- les éléments ajoutés dynamiquement n'auront pas le gestionnaire - c'est-à-dire, dans le code HTML ci-dessus, le "Alert!" nouvellement ajouté les boutons ne fonctionneront que si vous reliez le gestionnaire.
Quand on utilise .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});
avec ce qui précède, un single gestionnaire pour tous les éléments qui correspondent à votre sélecteur, y compris ceux créés dynamiquement.
... une autre raison d'utiliser .on
Comme Adrien a commenté ci-dessous, une autre raison d'utiliser .on est les événements namespaced.
Si vous ajoutez un gestionnaire avec .on("click", handler), vous le supprimez normalement avec .off("click", handler), ce qui supprimera ce gestionnaire. Évidemment, cela ne fonctionne que si vous avez une référence à la fonction, alors que faire si vous ne le faites pas? Vous utilisez des espaces de noms:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });
avec déliaison via
$("#element").off("click.someNamespace");
Y a-t-il une différence entre le code suivant?
Non, il n'y a pas de différence fonctionnelle entre les deux exemples de code dans votre question. .click(fn) est une "méthode de raccourci" pour .on("click", fn). De la documentation de .on() :
Il existe des méthodes abrégées pour certains événements, telles que
.click(), qui peuvent être utilisées pour attacher ou déclencher des gestionnaires d'événements. Pour une liste complète des méthodes abrégées, voir la catégorie events .
Notez que .on() diffère de .click() en ce sens qu'il a la possibilité de créer des gestionnaires d'événements délégués en passant un paramètre selector, contrairement à .click(). Lorsque .on() est appelé sans paramètre selector, son comportement est identique à celui de .click(). Si vous souhaitez déléguer des événements, utilisez .on().
.on() est le moyen recommandé de faire toutes vos liaisons d’événements à partir de jQuery 1.7. Il regroupe toutes les fonctionnalités de .bind() et .live() dans une fonction unique qui modifie le comportement lorsque vous lui transmettez différents paramètres.
Comme vous avez écrit votre exemple, il n'y a pas de différence entre les deux. Les deux lient un gestionnaire à l'événement click de #whatever. on() offre une flexibilité supplémentaire en vous permettant de déléguer des événements déclenchés par des enfants de #whatever à une fonction de gestionnaire unique, si vous le souhaitez.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });
Comme mentionné par les autres réponses:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })
Notant cependant que .on() prend en charge plusieurs autres combinaisons de paramètres que .click() ne permet pas, ce qui lui permet de gérer la délégation d’événements (remplaçant les fonctions .delegate() et .live()).
(Et évidemment, il existe d'autres méthodes de raccourcis similaires pour "keyup", "focus", etc.)
La raison pour laquelle je poste une réponse supplémentaire est de mentionner ce qui se passe si vous appelez .click() sans paramètre:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");
En notant que si vous utilisez directement .trigger(), vous pouvez également transmettre des paramètres supplémentaires ou un objet événement jQuery, ce que vous ne pouvez pas utiliser avec .click().
Je voulais également mentionner que si vous regardez le code source de jQuery (dans jquery-1.7.1.js), vous verrez qu'en interne, la fonction .click() (ou .keyup(), etc.) appellera en réalité .on() ou .trigger(). Évidemment, cela signifie que vous pouvez être assuré qu'ils ont vraiment le même résultat, mais cela signifie également que l'utilisation de .click() a un peu plus de frais généraux - pas de quoi s'inquiéter ou même penser dans la plupart des circonstances, mais théoriquement, cela pourrait avoir une importance dans des circonstances extraordinaires .
EDIT: Enfin, notez que .on() vous permet de lier plusieurs événements à la même fonction sur une seule ligne, par exemple:
$("#whatever").on("click keypress focus", function(){});
Non, il n'y en a pas.
Le point de on() est ses autres surcharges et la possibilité de gérer des événements qui n’ont pas de méthodes de raccourci.
Ils semblent être les mêmes ... Documentation de la fonction click () function:
Cette méthode est un raccourci pour .bind ('click', gestionnaire)
Documentation de la fonction on () :
Depuis jQuery 1.7, la méthode .on () fournit toutes les fonctionnalités requises pour attacher des gestionnaires d'événements. Pour obtenir de l'aide pour convertir d'anciens jQuery méthodes d’événement, voir .bind (), .delegate () et .live (). Pour supprimer des événements lié avec .on (), voir .off ().
Les événements .click ne fonctionnent que lorsque l'élément est rendu et ne sont attachés qu'aux éléments chargés lorsque le DOM est prêt.
Les événements .on sont attachés dynamiquement aux éléments DOM, ce qui est utile lorsque vous souhaitez attacher un événement aux éléments DOM rendus sur une demande ajax ou autre (une fois que le DOM est prêt).
Vous obtiendrez ici la liste des différentes manières d’appliquer l’événement click. Vous pouvez choisir en conséquence si vous voulez ou si votre clic ne fonctionne pas, essayez simplement une solution de rechange.
$('.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
})
Ils ont maintenant obsolète click (), il est donc préférable de continuer avec ('clic')
Pour ce qui est d’internet et de quelques amis, on utilise .on () lorsque vous ajoutez des éléments de manière dynamique. Mais quand je l'ai utilisé dans une simple page de connexion où click event devait envoyer AJAX à node.js et, au retour, ajouter de nouveaux éléments, il a commencé à appeler des appels multi-AJAX. Quand j'ai changé pour cliquer (), tout s'est bien passé. En fait, je n'avais pas fait face à ce problème auparavant.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });
- il est plus efficace que $ ('. UPDATE'). click (function () {});
- il peut utiliser moins de mémoire et fonctionner pour des éléments ajoutés dynamiquement.
- certaines données dynamiques récupérées avec les boutons edit et delete ne génèrent pas l'événement JQuery au moment de EDIT OR DELETE DATA des données de ligne sous forme, cette fonction
$(document).on('click','.UPDATE',function(){ });fonctionnant effectivement comme les mêmes données extraites à l'aide de jquery. bouton ne fonctionnant pas au moment de la mise à jour ou de la suppression:
