Pourquoi utiliser jQuery() au lieu de cliquez sur()

Question

Actuellement avec jQuery quand j'ai besoin de faire quelque chose lorsqu'un déclic se produit, je vais faire comme ça...

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

J'ai été à la recherche à un certain code de quelqu'un d'autre a un projet et qu'ils font comme ça...

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

De l'avis qu'il semble faire la même chose que ce que je peux dire, sauf qu'ils sont sur le live (), fonction qui est maintenant Obsolète et jQuery docs disent utiliser on() au lieu mais pourquoi utiliser live/() au lieu de mon premier exemple?

Answer 1

Car vous pourriez avoir un générées dynamiquement des éléments (par exemple provenant d'un appel AJAX), vous pourriez avoir le même gestionnaire de clic qui a été précédemment lié à la même sélecteur d'élément, vous avez alors le "délégué" l'événement click à l'aide de on() avec le sélecteur argument

Pour le démontrer:

http://jsfiddle.net/AJRw3/

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

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

est synonyme de

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

Dans le sens qu'il ne ajouter le gestionnaire d'un temps de tous les éléments avec la classe elementClass. Si vous avez un nouveau elementClass provenant, par exemple, $('<div class="elementClass" />'), le gestionnaire ne pourra pas être engagée sur ce nouvel élément, que vous devez faire:

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

En supposant #container est .elementClasss'ancêtre

Answer 2

Il y a beaucoup de réponses, chaque toucher sur quelques points - j'espère que cela peut vous donner votre réponse, avec une bonne explication de ce qu'il en est et comment l'utiliser.

À l'aide de click() est un alias bind('click' ...). À l'aide de bind() prend le DOM comme il l'est lorsque l'écouteur d'événement est mis en place et se lie à la fonction de chacun des éléments correspondants dans les DOM. C'est-à-dire que si vous utilisez $('a').click(...) vous permettra de lier la fonction fournie à l'événement click de chaque balise d'ancrage dans les DOM trouvé lorsque que le code s'exécute.

À l'aide de live() a été à l'ancienne en jQuery; il a été utilisé pour lier les événements comme bind() , mais il n'est pas juste de les lier à des éléments dans le DOM lorsque le code s'exécute, il écoute également à des changements dans les DOM et lier les événements à l'avenir tout-appariés éléments. Ceci est utile si vous êtes en train de faire de manipulation du DOM et vous avez besoin d'un événement d'exister sur certains éléments qui pourraient être supprimés ou mis à jour le/ajouté au DOM plus tard, mais qui n'existent pas lorsque le DOM est chargé pour la première fois.

La raison qu' live() est maintenant déprécié parce qu'il a été mal appliqué. Afin d'utiliser live(), vous avez eu à être en mesure de choisir au moins un élément dans le DOM, à l'origine (je crois). Il a également provoqué une copie de la fonction à exécuter à être lié à chaque élément - et si vous avez des éléments de 1000, c'est beaucoup de copié fonctions.

La création de l' on() fonction était de surmonter ces problèmes. Il vous permet de lier un seul écouteur d'événement à un objet qui ne changera pas dans les DOM (donc vous ne pouvez pas utiliser on() sur un élément qui va être supprimé/ajouté au DOM plus tard - il lier à un objet parent), et il suffit d'appliquer un élément de "filtre" de sorte que la fonction n'est exécutée que lorsqu'il est propagée à un élément qui correspond au sélecteur. Cela signifie que vous avez juste une fonction qui existe (ce n'est pas un tas de copies) lié à un seul élément - une bien meilleure approche de l'ajout de "vivre" des événements dans les DOM.

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

Answer 3

Ok,

• $("a").live() --> Elle s'applique à tous <a>, même s'il est créé, après ce qui est appelé.
• $("a").click() --> Il sera le seul applicable à tous <a> avant de ce qui est appelé. (C'est un raccourci de l' bind(), et on() en 1.7)
• $("a").on() --> Fournit toutes les fonctionnalités nécessaires pour fixer les gestionnaires d'événements. (Les plus récents en jQuery 1.7)

Citations:

Comme de jQuery 1.7, l' .live() la méthode est obsolète. Utiliser .sur() pour attacher les gestionnaires d'événements. Les utilisateurs des anciennes versions de jQuery doit utiliser .délégué() de préférence .live().
Cette méthode fournit un moyen d'attacher de délégué des gestionnaires d'événements pour l'élément de document de la page, ce qui simplifie l'utilisation de gestionnaires d'événements lorsque le contenu est ajouté dynamiquement une page. Voir la discussion de diriger contre le délégué des événements dans le .() la méthode pour plus d'informations.

L' .() la méthode d'attache des gestionnaires d'événement de la série d'éléments dans l'objet jQuery. Comme de jQuery 1.7, l' .sur la (les) méthode fournit toutes les fonctionnalités nécessaires pour fixer les gestionnaires d'événements.

Pour les versions antérieures, l' .méthode bind() est utilisé pour attacher un gestionnaire d'événement directement à des éléments.

Answer 4

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

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

Pour déléguer les événements à on(), c'est à dire. dans la dynamique créée des objets que vous pouvez faire:

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

Mais, on() présente délégation dans tout élément statique, pas seulement document comme live() , donc:

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

Answer 5

Vous devriez lire sur la différence entre live et bind.

En un mot, live utilise événement délégation, vous permettant de les lier à des éléments qui existent maintenant et dans l'avenir.

En revanche, les gestionnaires fixés par l'intermédiaire bind (et ses raccourcis, comme click) associer des gestionnaires directement aux éléments du DOM correspondant au sélecteur, et, par conséquent, ne sont liés à des éléments qui existent maintenant.

Une conséquence de l' live's la flexibilité est une diminution de la performance, afin de l'utiliser seulement quand vous avez besoin de la fonctionnalité qu'il propose.