Pourquoi utiliser jQuery on () au lieu de click ()

Actuellement avec jQuery quand j'ai besoin de faire quelque chose quand un clic se produit, je le ferai comme ça ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

Je regardais du code que quelqu'un d'autre a sur un projet et ils le font comme ça ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Notez qu'il semble faire la même chose pour autant que je sache, sauf qu'ils utilisent la fonction live () qui est maintenant obsolète et que les documents jQuery disent d'utiliser à la on()place, mais dans tous les cas, pourquoi utiliser live / on () au lieu de mon premier exemple?

Étant donné que vous pouvez avoir un élément généré dynamiquement (par exemple provenant d'un appel AJAX), vous pouvez souhaiter avoir le même gestionnaire de clic qui était auparavant lié au même sélecteur d'élément, vous «déléguez» alors l'événement de clic en utilisant l' on()argument de sélecteur

Démontrer:

http://jsfiddle.net/AJRw3/

on()peut également être synonyme de click()si vous n'avez pas spécifié de sélecteur:

$('.elementClass').click(function() { // code 
});

est synonyme de

$('.elementClass').on('click', function() { // code
});

Dans le sens où il n'ajoute qu'une seule fois le gestionnaire à tous les éléments avec class elementClass. Si vous avez un nouveau elementClassprovenant de, par exemple $('<div class="elementClass" />'), le gestionnaire ne sera pas lié à ce nouvel élément, vous devez faire:

$('#container').on('click', '.elementClass', function() { // code
});

En supposant que #containerc'est .elementClassl'ancêtre de

Il y a beaucoup de réponses, chacune touchant à quelques points - j'espère que cela peut vous donner votre réponse, avec une bonne explication de quoi et comment l'utiliser.

L'utilisation click()est un alias de bind('click' ...). L'utilisation bind()prend le DOM tel qu'il est lorsque l'écouteur d'événements est en cours de configuration et lie la fonction à chacun des éléments correspondants dans le DOM. C'est-à-dire que si vous l'utilisez, $('a').click(...)vous lierez la fonction fournie à l'événement click de chaque balise d'ancrage dans le DOM trouvée lorsque ce code s'exécute.

L'utilisation live()était à l'ancienne dans jQuery; il a été utilisé pour lier des événements comme le bind()fait, mais il ne les lie pas seulement aux éléments dans le DOM lorsque le code s'exécute - il écoute également les changements dans le DOM et liera également les événements à tous les éléments futurs. Ceci est utile si vous effectuez une manipulation DOM et que vous avez besoin d'un événement sur certains éléments qui peuvent être supprimés / mis à jour / ajoutés au DOM plus tard, mais qui n'existent pas lorsque le DOM est chargé pour la première fois.

La raison qui live()est maintenant dépréciée est parce qu'elle a été mal appliquée. Pour l'utiliser live(), vous deviez pouvoir sélectionner au moins un élément dans le DOM au départ (je crois). Cela provoquait également l'exécution d'une copie de la fonction liée à chaque élément - et si vous avez 1000 éléments, c'est beaucoup de fonctions copiées.

La création de la on()fonction visait à surmonter ces problèmes. Il vous permet de lier un seul écouteur d'événement à un objet qui ne changera pas dans le DOM (vous ne pouvez donc pas utiliser on()sur un élément qui sera supprimé / ajouté au DOM plus tard - liez-le à un objet parent), et appliquez simplement un élément "filtre" pour que la fonction ne soit exécutée que lorsqu'elle est remontée jusqu'à un élément qui correspond au sélecteur. Cela signifie que vous n'avez qu'une seule fonction qui existe (pas un tas de copies) liée à un seul élément - une bien meilleure approche pour ajouter des événements "en direct" dans le DOM.

... et c'est ce que sont les différences, et pourquoi chaque fonction existe et pourquoi live()est dépréciée.

• $("a").live()-> Il s'appliquera à tous <a>, même s'il est créé après son appel.
• $("a").click()-> Cela ne s'appliquera qu'à tous <a>avant que cela ne soit appelé. (Ceci est un raccourci de bind(), et on()dans 1.7)
• $("a").on()-> Fournit toutes les fonctionnalités requises pour attacher des gestionnaires d'événements. (Plus récent dans jQuery 1.7)

Citations :

Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d'événements. Les utilisateurs d'anciennes versions de jQuery devraient utiliser .delegate () de préférence à .live ().
Cette méthode permet d'attacher des gestionnaires d'événements délégués à l'élément de document d'une page, ce qui simplifie l'utilisation des gestionnaires d'événements lorsque le contenu est ajouté dynamiquement à une page. Voir la discussion sur les événements directs et délégués dans la méthode .on () pour plus d'informations.

La méthode .on () attache des gestionnaires d'événements à l'ensemble d'éléments actuellement sélectionné dans l'objet jQuery. Depuis jQuery 1.7, la méthode .on () fournit toutes les fonctionnalités requises pour attacher des gestionnaires d'événements.

Pour les versions antérieures, la méthode .bind () est utilisée pour attacher un gestionnaire d'événements directement aux éléments.

click()est un raccourci vers la méthode de non délégation de on(). Donc:

$(".close-box").click() === $(".close-box").on('click')

Pour déléguer des événements avec on(), ie. dans les objets créés dynamiques, vous pouvez faire:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

Mais, on()introduit la délégation dans n'importe quel élément statique, pas seulement documentcomme le live()fait, donc:

$("#closestStaticElement").on('click', '.close-box')

Vous devriez lire la différence entre liveetbind .

En un mot, liveutilise la délégation d'événements, vous permettant de vous lier à des éléments qui existent maintenant et dans le futur.

En revanche, les gestionnaires attachés via bind(et ses raccourcis, comme click) attachent des gestionnaires directement aux éléments DOM correspondant au sélecteur, et ne sont donc liés qu'aux éléments qui existent maintenant.

Une conséquence de livela flexibilité de 's est une diminution des performances, donc ne l'utilisez que lorsque vous avez besoin des fonctionnalités qu'elle fournit.

$el.click(fn) est un raccourci pour $el.on('click', fn)

Voir http://api.jquery.com/click/ et http://api.jquery.com/on/ pour plus d'informations.

Lorsque vous avez besoin de lier certains gestionnaires d'événements, dynamically added elementsvous devez utiliser live(obsolète) ou le onfaire fonctionner. $('element').click(...);Ne fonctionnera tout simplement pas sur un élément ajouté dynamiquement dans le DOM.

Plus d'informations sur la différence entre .bind (), .live () et .delegate () de jQuery .

$ .click () est simplement un raccourci pour bind ou on. À partir de la documentation jQuery:

Dans les deux premières variantes, cette méthode est un raccourci pour .bind ("clic", gestionnaire), ainsi que pour .on ("clic", gestionnaire) à partir de jQuery 1.7. Dans la troisième variante, lorsque .click () est appelé sans argument, c'est un raccourci pour .trigger ("clic").

La .on()méthode attache des gestionnaires d'événements à l'ensemble d'éléments actuellement sélectionné dans l'objet jQuery. La click()méthode lie un gestionnaire d'événements à l'événement JavaScript "clic" ou déclenche cet événement sur un élément.

Dans la plaine, .click(...si la cible du sélecteur change à la volée (par exemple via une réponse ajax), vous devrez à nouveau attribuer le comportement.

Le .on(...est très nouveau (jQuery 1.7) et il peut couvrir le scénario en direct en utilisant des événements délégués, ce qui est un moyen plus rapide d'attacher un comportement de toute façon.

Dans onmethod, le gestionnaire d'événements est attaché à l'élément parent au lieu de target.

exemple: $(document).on("click", ".className", function(){});

Dans l'exemple ci-dessus, le gestionnaire d'événements de clic est attaché au document. Et il utilise l'évènement bouillonnant pour savoir si quelqu'un a cliqué sur l'élément cible.