Evento jQuery stesso clic per più elementi

436

Esiste un modo per eseguire lo stesso codice per elementi diversi nella pagina?

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

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

invece di fare qualcosa del genere:

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

Grazie

jquery events

— Kelvin
fonte

867

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

O:

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

Questo funziona anche con oggetti esistenti:

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

— Eevee
fonte

11

Per aiutare gli sviluppatori a ricordare questo, anche se un po 'più esteso usando più classi psuedo è lo stesso formato dell'applicazione di un selettore css quando si definiscono gli stili

— Brett Weber,

8

E se class2 fosse stato memorizzato nella cache in questo modo var class2 = $ (". Class2")?

— Vivek S,

18

@NeverBackDown .add()funziona anche con oggetti jquery

— Eevee,

2

Si noti che ciò collegherà comunque eventi agli oggetti jquery esistenti, anche se uno dei selettori restituisce un valore indefinito.

— Ben Sewards,

3

qualcuno può spiegare qual è la vera differenza tra $('.class1, .class2')e $('.class1').add('.class2')? in quale caso dovremmo usare .add()?

— Taufik Nur Rahmanda,

108

Normalmente uso oninvece di click. Mi permette di aggiungere più ascoltatori di eventi a una funzione specifica.

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

Spero che sia d'aiuto!

— bzin
fonte

1

Mi piace così meglio. Ma puoi scegliere come target un elemento per classe e uno per ID nella stessa dichiarazione? Ad esempio $ (documento) .on ("click touchend", ".class1, # id1, .class3", function () {// do stuff});

— Gaurav Ojha,

3

un anno dopo: sì, puoi! @GauravOjha

— Obed Marquez Parlapiano,

3

Questa tecnica - la creazione di un gestore delegato, piuttosto che diretto - offre anche il vantaggio unico di gestire gli eventi innescati dagli elementi corrispondenti creati dopo la registrazione del gestore. Vedi: api.jquery.com/on

— Jonathan Lidbeck il

39

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

Assicurati di inserire uno spazio come $ ('. Class1, space here.class2') altrimenti non funzionerà.

— coolguy
fonte

17

Basta usare $('.myclass1, .myclass2, .myclass3')per più selettori. Inoltre, non sono necessarie funzioni lambda per associare una funzione esistente all'evento click.

— code_burgar
fonte

7

hai bisogno di uno spazio dopo le virgole

— Maurizio In danimarca

10

Un'altra alternativa, supponendo che i tuoi elementi siano memorizzati come variabili (che è spesso una buona idea se accedi a loro più volte in un corpo di funzione):

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

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

Sfrutta il concatenamento di jQuery e consente di utilizzare i riferimenti.

— pimbrouwers
fonte

4

Se hai o vuoi mantenere i tuoi elementi come variabili (oggetti jQuery), puoi anche passarci sopra:

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

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

— frzsombor
fonte

3

Aggiungi un elenco separato da virgole di classi come questo:

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

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

//  Your code

    }

});

— dev
fonte

2

Possiamo codificare come segue anche, ho usato l'evento sfocatura qui.

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

— Nitin Pawar
fonte

1

Ho un collegamento a un oggetto contenente molti campi di input, che richiede di essere gestito dallo stesso evento. Quindi uso semplicemente find () per ottenere tutti gli oggetti interni, che devono avere l'evento

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

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

Nel caso in cui gli oggetti sono di un livello verso il basso i link di bambini () invece find () metodo può essere utilizzato.

— Andrii Bogachenko
fonte

1

Oltre agli eccellenti esempi e risposte sopra, puoi anche fare una "ricerca" per due diversi elementi usando le loro classi. Per esempio:

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

Questo dovrebbe generare "HelloWorld".

— Arkhaine
fonte