jQuery mesmo evento de clique para vários elementos

Existe alguma maneira de executar o mesmo código para diferentes elementos na página?

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

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

em vez disso, faça algo como:

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

obrigado

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

Ou:

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

Isso também funciona com objetos existentes:

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

Eu normalmente uso em onvez de click. Isso me permite adicionar mais ouvintes de eventos a uma função específica.

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

Espero que ajude!

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

Coloque um espaço como $ ('. Class1, space here.class2'), caso contrário não funcionará.

Basta usar $('.myclass1, .myclass2, .myclass3')para vários seletores. Além disso, você não precisa de funções lambda para vincular uma função existente ao evento click.

Outra alternativa, supondo que seus elementos sejam armazenados como variáveis ​​(o que geralmente é uma boa ideia se você os estiver acessando várias vezes em um corpo de função):

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

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

Aproveita o encadeamento do jQuery e permite usar referências.

Se você possui ou deseja manter seus elementos como variáveis ​​(objetos jQuery), também pode fazer um loop sobre eles:

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

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

Adicione uma lista separada por vírgula de classes como esta:

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

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

//  Your code

    }

});

Podemos codificar como segue também, usei o evento blur aqui.

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

Eu tenho um link para um objeto que contém muitos campos de entrada, que precisam ser manipulados pelo mesmo evento. Então, eu simplesmente uso find () para obter todos os objetos internos, que precisam ter o evento

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

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

Caso seus objetos estejam em um nível abaixo, o método children (), em vez disso, find () pode ser usado.

Além dos excelentes exemplos e respostas acima, você também pode fazer uma "busca" para dois elementos diferentes usando suas classes. Por exemplo:

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

Isso deve gerar "HelloWorld".