jQuery mesmo evento de clique para vários elementos


435

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

Respostas:


866
$('.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);

11
Para ajudar os desenvolvedores lembre-se disso, mesmo se um pouco mais estendido usando mais classes pseudo é o mesmo formato que a aplicação de um seletor css ao definir estilos
Brett Weber

8
E se class2 tivesse sido armazenado em cache como este var class2 = $ (". Class2")?
Vivek S

18
@NeverBackDown .add()obras com jQuery objetos também
Eevee

2
Observe que isso ainda anexará eventos a objetos jquery existentes, mesmo que um dos seletores retorne indefinido.
precisa saber é o seguinte

3
alguém pode explicar qual é a real diferença entre $('.class1, .class2')e $('.class1').add('.class2')? em que caso devemos usar .add()?
Taufik Nur Rahmanda 23/03

108

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!


1
Eu gosto desse jeito melhor. Mas você pode direcionar um elemento por classe e um por ID na mesma declaração? Por exemplo, $ (document) .on ("clique touchend", ".classe1, # id1, .classe3", function () {// faça coisas});
Gaurav Ojha

3
um ano depois: sim, você pode! @GauravOjha
Obed Marquez Parlapiano

3
Essa técnica - criar um manipulador delegado, em vez de direto - também oferece a vantagem exclusiva de manipular eventos acionados por elementos correspondentes criados após o registro do manipulador. Veja: api.jquery.com/on
Jonathan Lidbeck

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

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


17

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.


7
você precisa de um espaço após as vírgulas
Maurizio In denmark

10

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.


4

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();
    });
});

3

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

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

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

//  Your code

    }

});

2

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);
      }
  });

1

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.


1

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.