web-dev-qa-db-fra.com

Méthode jQuery on () sur plusieurs sélecteurs

Depuis la version 1.7 live est obsolète.

L'exemple suivant est facile à rendre compatible avec la nouvelle méthode on:

$('nav li, #sb-nav li, #help li').live('click', function () {
    // code...
});

Utilisation de on:

$('nav, #sb-nav, #help').on('click', 'li', function () {
    // code...
});

Comment réécrire l'exemple suivant en utilisant on?

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
     // code...
 });
javascriptjqueryjquery-1.7
46
Wojciech Bednarski
$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
     // code...
 });

.live() est juste un document contraignant en tant qu'auditeur.

Mes deux cents sont que vous pouvez presque toujours trouver un meilleur auditeur que document. Au strict minimum, presque toutes les pages utilisent un wrapper de contenu principal. Cela élimine les nœuds dans l'en-tête, le pied de page et parfois les barres latérales en tant qu'auditeurs.

La meilleure façon d'utiliser .on En tant que fonction de délégation consiste à identifier l'ancêtre commun le plus proche qui ne devrait jamais être détruit ou autrement avoir des événements non liés. Par exemple, si vous avez un formulaire qui est mis à jour et modifié par des demandes ajax, l'écouteur peut être le nœud du formulaire lui-même (si seul le contenu du formulaire est mis à jour) ou un élément conteneur (généralement un div) qui entoure le formulaire. Si un tel div n'est pas là, vous pouvez toujours l'ajouter, ou vous pouvez simplement remonter l'arbre jusqu'au prochain ancêtre.

[modifié pour ajouter:]

Dans l'exemple de code fourni, il est difficile de dire s'il existe un meilleur écouteur qui contiendrait à la fois #header Et aussi #sb-sec. Mais en imaginant que ces choses partagent un ancêtre avec l'ID "mainContainer", votre code plus efficace échange simplement l'auditeur:

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
   // code...
});
78
Greg Pettit

Si vous essayez d'utiliser .on() pour pouvoir écouter les événements sur l'objet DOM qui peuvent être créés après avoir effectué l'appel initial .on(), alors la façon la plus efficace de le faire est de trouver un objet parent existant qui ne viendra pas et vous pouvez lier des écouteurs d'événements à maintenant.

.live() place tous les écouteurs sur l'objet document (le parent principal) et pourrait devenir assez inefficace si vous aviez beaucoup d'écouteurs.

.on() vous permet de spécifier ce que cet objet parent sera le plus efficacement possible. Donc, si vous voulez mettre tous ces gestionnaires d'événements dans une seule instruction et que ces '#header .fixed-feedback-bn, # sb-sec .feedback-bn' n'ont pas de parent commun, alors vous devrez spécifier document comme ce parent comme Greg l'a écrit.

Mais, une manière plus efficace de procéder serait de séparer cela en fonction des besoins. Pour les éléments qui n'ont pas de besoin dynamique, il suffit de se lier directement à cet élément. Par exemple, si #header et # sb-sec ne vient pas/n'a pas besoin d'un comportement dynamique, vous pouvez simplement le trouver directement comme ceci:

$('#header, #sb-sec').on('click', function() {
    // code here
});

Et, pour les éléments dont vous avez besoin d'un comportement dynamique, choisissez un parent commun approprié et accrochez-vous comme celui-ci en utilisant le parent commun comme point de capture pour les événements et le sélecteur comme filtre pour les sous-éléments pour lesquels vous souhaitez que l'événement se déclenche. pour:

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
    // code here
});
5
jfriend00