jQuery mismo evento de clic para elementos múltiples

Question

¿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 vez de hacer algo como:

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

Gracias

Answer 1

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

O:

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

Answer 2

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

Answer 3

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

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

Answer 4

que normalmente utilizan on en lugar 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 que ayude!

Answer 5

Otra alternativa, suponiendo que sus elementos se almacenan como variables (que a menudo es una buena idea si se está accediendo a múltiples 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); 
}; 

se aprovecha de jQuery encadenamiento y que permite para usar referencias

Answer 6

Tengo un enlace a un objeto que contiene muchos campos de entrada, que requiere ser manejado por el mismo evento. Por lo tanto, basta con utilizar find() para conseguir todos los objetos en el interior, que necesitan tener el evento

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

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

En caso de que los objetos son un nivel más abajo el enlace niños() lugar Se puede usar el método find().

Answer 7

Podemos codificar como los siguientes también, he usado el evento blur aquí.

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

Answer 8

Además de los excelentes ejemplos y respuestas anteriores, también se puede hacer un "hallazgo" de dos elementos diferentes que utilizan 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".

Answer 9

Añadir una lista separada por comas de las clases de la siguiente manera:

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

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

// Your code 

    } 

});