jQuery mismo evento de clic para múltiples elementos

436

¿Hay alguna forma de ejecutar el mismo código para diferentes elementos en la página?

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

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

en lugar de hacer algo como:

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

Gracias

jquery events

— Kelvin
fuente

867

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

O:

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

Esto también funciona con objetos existentes:

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

— Eevee
fuente

11

Para ayudar a los desarrolladores a recordar esto, incluso si es un poco más extendido usando más clases de psuedo, es el mismo formato que aplicar un selector CSS al definir estilos

— Brett Weber

8

¿Qué pasaría si la clase 2 se hubiera almacenado en caché como esta var class2 = $ (". Class2")?

— Vivek S

18

@NeverBackDown también .add()funciona con objetos jquery

— Eevee

2

Tenga en cuenta que esto aún adjuntará eventos a los objetos jquery que existen, incluso si uno de los selectores devuelve indefinido.

— Ben Sewards

3

¿Alguien puede explicar cuál es la verdadera diferencia entre $('.class1, .class2')y $('.class1').add('.class2')? en que caso debemos usar .add()?

— Taufik Nur Rahmanda

108

Normalmente uso en onlugar de click. Me permite agregar más oyentes de eventos a una función específica.

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

¡Espero eso ayude!

— bzin
fuente

1

Me gusta más así. Pero, ¿puede apuntar a un elemento por clase y uno por ID en la misma declaración? Por ejemplo, $ (document) .on ("click touchend", ".class1, # id1, .class3", function () {// do stuff});

— Gaurav Ojha

3

un año después: sí, puedes! @GauravOjha

— Obed Marquez Parlapiano

3

Esta técnica, crear un controlador delegado, en lugar de un controlador directo, también ofrece la ventaja única de manejar eventos activados por elementos coincidentes creados después de registrar el controlador. Ver: api.jquery.com/on

— Jonathan Lidbeck

39

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

Asegúrese de poner un espacio como $ ('. Class1, space here.class2') o de lo contrario no funcionará.

— coolguy
fuente

17

Simplemente use $('.myclass1, .myclass2, .myclass3')para múltiples selectores. Además, no necesita funciones lambda para vincular una función existente al evento click.

— code_burgar
fuente

77

necesitas un espacio después de las comas

— Maurizio En Dinamarca

10

Otra alternativa, suponiendo que sus elementos se almacenan como variables (que a menudo es una buena idea si accede a ellos varias veces en un cuerpo de función):

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

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

Aprovecha el encadenamiento de jQuery y le permite usar referencias.

— pimbrouwers
fuente

4

Si tiene o desea mantener sus elementos como variables (objetos jQuery), también puede recorrerlos:

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

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

— frzsombor
fuente

3

Agregue una lista de clases separadas por comas como esta:

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

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

//  Your code

    }

});

— Dev
fuente

2

Podemos codificar como el siguiente también, he usado el evento de desenfoque aquí.

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

— Nitin Pawar
fuente

1

Tengo un enlace a un objeto que contiene muchos campos de entrada, lo que requiere ser manejado por el mismo evento. Así que simplemente uso find () para obtener todos los objetos internos, que necesitan tener el evento

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

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

En caso de que sus objetos estén un nivel abajo, se puede usar el enlace children () en su lugar find () .

— Andrii Bogachenko
fuente

1

Además de los excelentes ejemplos y respuestas anteriores, también puede hacer un "hallazgo" para dos elementos diferentes utilizando sus clases. Por ejemplo:

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

Esto debería generar "HelloWorld".

— Arkhaine
fuente