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

jquery events

— Kelvin
source

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
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
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
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
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
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
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
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
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
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
source