Différence entre .on ('click') et .click ()
Réponses:
Je pense que la différence réside dans les modèles d'utilisation.
Je préférerais .onplus .clickparce que le premier peut utiliser moins de mémoire et travailler 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 "Alerte!" pour afficher une alerte. Nous pouvons utiliser "cliquer" ou "sur" pour cela.
Quand nous utilisons click
$("button.alert").click(function() {
alert(1);
});avec ce qui précède, un gestionnaire distinct est créé pour chaque élément unique 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 html ci-dessus le "Alert!" nouvellement ajouté les boutons ne fonctionneront que si vous reliez le gestionnaire.
Quand nous utilisons .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});avec ce qui précède, un gestionnaire unique pour tous les éléments qui correspondent à votre sélecteur, y compris ceux créés dynamiquement.
... une autre raison d'utiliser .on
Comme l'a commenté Adrien ci-dessous, une autre raison d'utiliser .onest les événements à espace de noms.
Si vous ajoutez un gestionnaire avec .on("click", handler)vous, supprimez-le normalement avec .off("click", handler)ce qui supprimera ce gestionnaire même. Évidemment, cela ne fonctionne que si vous avez une référence à la fonction, et si vous n'en avez pas? Vous utilisez des espaces de noms:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });avec reliure via
$("#element").off("click.someNamespace");on('click' ...), voir stackoverflow.com/a/3973060/759452 ie. on('click.darkenallothersections' ...)et en même temps on('click.displaynextstep' ...), alors je ne peux délier que celui que je choisis en utilisant.unbind('click.displaynextstep')
on()est la tendance de jQuery. Je devais mise à jour $(window).load(function() {});à $(window).on("load", function (e) {})quand je suis passé à jQuery 3.
Y a-t-il une différence entre le code suivant?
Non, il n'y a aucune 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 celles
.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 des événements .
Notez que cela .on()diffère du .click()fait qu'il a la possibilité de créer des gestionnaires d'événements délégués en passant un selectorparamètre, alors .click()qu'il ne le fait pas. Quand .on()est appelé sansselector paramètre, il se comporte exactement de la même manière que .click(). Si vous souhaitez une délégation d'événement, utilisez .on().
selectorparamètre. Si vous appelez .on()sans selectorparamètre, il n'y a aucune amélioration des performances par rapport à l'utilisation .click().
.on()est la méthode recommandée pour effectuer toutes vos liaisons d'événements à partir de jQuery 1.7. Il regroupe toutes les fonctionnalités des deux .bind()et .live()en une seule fonction qui modifie le comportement lorsque vous lui passez différents paramètres.
Comme vous avez écrit votre exemple, il n'y a aucune différence entre les deux. Les deux lient un gestionnaire à l' clickévénement de #whatever. on()offre une flexibilité supplémentaire en vous permettant de déléguer des événements déclenchés par des enfants #whateverà une seule fonction de gestionnaire, si vous le souhaitez.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()fait? En outre, cela semble contredire les autres réponses qui disent qu'il n'a que la fonctionnalité de .click(), et ne s'applique donc pas aux événements futurs.
.on()peut faire ce qui .click()fait et faire quoi .bind()et .live()faire - cela dépend des paramètres avec lesquels vous l'appelez. (Certaines autres réponses le mentionnent également.) Notez cependant que "Lier à tous les liens à l'intérieur de # quoi que ce soit" n'est pas ce qui .live()fait, c'est ce qui .delegate()fait. .live()se lie à tout l'intérieur documentplutôt que de vous laisser spécifier le conteneur. Remarque .live()est également déconseillée à partir de jQuery 1.7.
Comme mentionné par les autres réponses:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })Notez cependant que cela .on()prend en charge plusieurs autres combinaisons de paramètres qui .click()ne le font pas, ce qui lui permet de gérer la délégation d'événements (remplaçant .delegate()et .live()).
(Et évidemment, il existe d'autres méthodes de raccourci 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ètres:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");Notez que si vous utilisez .trigger()directement, vous pouvez également passer des paramètres supplémentaires ou un objet événement jQuery, ce que vous ne pouvez pas faire .click().
Je voulais également mentionner que si vous regardez le code source jQuery (dans jquery-1.7.1.js), vous verrez qu'en interne la fonction .click()(ou .keyup(), etc.) appellera réellement .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 .click()a un tout petit 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 de l'importance dans des circonstances extraordinaires.
EDIT: Enfin, notez que cela .on()vous permet de lier plusieurs événements à la même fonction sur une seule ligne, par exemple:
$("#whatever").on("click keypress focus", function(){});.click().)
Ils semblent être les mêmes ... Documentation de la fonction click () :
Cette méthode est un raccourci pour .bind («clic», 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 sur la conversion à partir d'anciennes méthodes d'événement jQuery, consultez .bind (), .delegate () et .live (). Pour supprimer les événements liés avec .on (), voir .off ().
.clickvs.on
.click les événements ne fonctionnent que lorsque l'élément est rendu et ne sont attachés aux éléments chargés que lorsque le DOM est prêt.
.on les événements 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 demande ajax ou autre chose (une fois que le DOM est prêt).
Ici, vous obtiendrez une liste des différentes manières d'appliquer l'événement click. Vous pouvez sélectionner en conséquence comme satisfaisant ou si votre clic ne fonctionne pas, essayez simplement une alternative parmi celles-ci.
$('.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
})Pour autant qu'il ne soit pas connu d'Internet et de certains amis .on () est utilisé lorsque vous ajoutez dynamiquement des éléments. Mais quand je l'ai utilisé dans une simple page de connexion où l'événement click devrait envoyer AJAX à node.js et au retour ajouter de nouveaux éléments, il a commencé à appeler des appels multi-AJAX. Quand je l'ai changé pour cliquer () tout s'est bien passé. En fait, je n'ai pas fait face à ce problème avant.
NOUVEAUX ÉLÉMENTS
En complément des réponses complètes ci-dessus pour mettre en évidence les points critiques si vous souhaitez que le clic soit attaché à de nouveaux éléments:
- les éléments sélectionnés par le premier sélecteur, par exemple $ ("body") doivent exister au moment de la déclaration sinon il n'y a rien à attacher.
- vous devez utiliser les trois arguments de la fonction .on (), y compris le sélecteur valide pour vos éléments cibles comme deuxième argument.
$('.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 les éléments ajoutés dynamiquement.
- certaines données dynamiques récupérées avec le bouton d'édition et de suppression ne génèrent pas d'événement JQuery au moment de la modification ou de la suppression des données des lignes sous forme, ce temps
$(document).on('click','.UPDATE',function(){ });fonctionne efficacement comme les mêmes données récupérées en utilisant jquery. bouton ne fonctionne pas au moment de la mise à jour ou de la suppression:
