jQuery même événement de clic pour plusieurs éléments

436

Existe-t-il un moyen d'exécuter le même code pour différents éléments de la page?

$('.class1').click(function() {
   some_function();
});

$('.class2').click(function() {
   some_function();
});

au lieu de faire quelque chose comme:

$('.class1').$('.class2').click(function() {
   some_function();
});

Merci

Kelvin
la source

Réponses:

867
$('.class1, .class2').on('click', some_function);

Ou:

$('.class1').add('.class2').on('click', some_function);

Cela fonctionne également avec les objets existants:

const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);
Évoli
la source
11
Pour aider les développeurs à se souvenir de cela, même s'il est un peu plus étendu en utilisant plus de classes psuedo, c'est le même format que l'application d'un sélecteur css lors de la définition des styles
Brett Weber
8
Et si class2 avait été mis en cache comme ceci var class2 = $ (". Class2")?
Vivek S
18
@NeverBackDown .add()fonctionne aussi avec les objets jquery
Evoli
2
Notez que cela attachera toujours des événements aux objets jquery qui existent, même si l'un des sélecteurs renvoie undefined.
Ben Sewards
3
quelqu'un peut-il expliquer quelle est la vraie différence entre $('.class1, .class2')et $('.class1').add('.class2')? dans quel cas devrions-nous utiliser .add()?
Taufik Nur Rahmanda
108

J'utilise normalement onau lieu de click. Cela me permet d'ajouter plus d'auditeurs d'événements à une fonction spécifique.

$(document).on("click touchend", ".class1, .class2, .class3", function () {
     //do stuff
});

J'espère que cela aide!

bzin
la source
1
J'aime mieux cette façon. Mais pouvez-vous cibler un élément par classe et un par ID dans la même déclaration? Par exemple, $ (document) .on ("click touchend", ".class1, # id1, .class3", function () {// do stuff});
Gaurav Ojha
3
un an plus tard: oui, vous le pouvez! @GauravOjha
Obed Marquez Parlapiano
3
Cette technique - création d'un gestionnaire délégué plutôt que direct - offre également l'avantage unique de gérer les événements déclenchés par les éléments correspondants créés après l' enregistrement du gestionnaire. Voir: api.jquery.com/on
Jonathan Lidbeck
39
$('.class1, .class2').click(some_function);

Assurez-vous de mettre un espace comme $ ('. Class1, space here.class2') sinon cela ne fonctionnera pas.

Un gars sympa
la source
17

Utilisez simplement $('.myclass1, .myclass2, .myclass3')pour plusieurs sélecteurs. De plus, vous n'avez pas besoin de fonctions lambda pour lier une fonction existante à l'événement click.

code_burgar
la source
7
vous avez besoin d'un espace après les virgules
Maurizio In denmark
10

Une autre alternative, en supposant que vos éléments sont stockés sous forme de variables (ce qui est souvent une bonne idée si vous y accédez plusieurs fois dans un corps de fonction):

function disableMinHeight() {
    var $html = $("html");
    var $body = $("body");
    var $slideout = $("#slideout");

    $html.add($body).add($slideout).css("min-height", 0);
};

Profite du chaînage jQuery et vous permet d'utiliser des références.

pimbrouwers
la source
4

Si vous avez ou souhaitez conserver vos éléments en tant que variables (objets jQuery), vous pouvez également les boucler:

var $class1 = $('.class1');
var $class2 = $('.class2');

$([$class1,$class2]).each(function() {
    $(this).on('click', function(e) {
        some_function();
    });
});
frzsombor
la source
3

Ajoutez une liste de classes séparées par des virgules comme ceci:

jQuery(document).ready(function($) {

$('.class, .id').click(function() { 

//  Your code

    }

});
Dev
la source
2

Nous pouvons coder comme suit également, j'ai utilisé l'événement flou ici.

$("#proprice, #proqty").blur(function(){
      var price=$("#proprice").val();
      var qty=$("#proqty").val();
      if(price != '' || qty != '')
      {
          $("#totalprice").val(qty*price);
      }
  });
Nitin Pawar
la source
1

J'ai un lien vers un objet contenant de nombreux champs de saisie, qui doit être géré par le même événement. Donc j'utilise simplement find () pour obtenir tous les objets intérieurs, qui doivent avoir l'événement

var form = $('<form></form>');
// ... apending several input fields

form.find('input').on('change', onInputChange);

Dans le cas où vos objets sont un niveau plus bas le lien des enfants () au lieu trouver () méthode peut être utilisée.

Andrii Bogachenko
la source
1

En plus des excellents exemples et réponses ci-dessus, vous pouvez également faire une "recherche" pour deux éléments différents en utilisant leurs classes. Par exemple:

<div class="parent">
<div class="child1">Hello</div>
<div class="child2">World</div>
</div>

<script>
var x = jQuery('.parent').find('.child1, .child2').text();
console.log(x);
</script>

Cela devrait produire "HelloWorld".

Arkhaine
la source