events click - jQuery mesmo evento de clique para vários elementos



trigger link (9)

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

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

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

em vez disso, fazer algo como:

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

obrigado


Answers

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

Certifique-se de colocar um espaço como $ ('. Class1, space here.class2') caso contrário não funcionará


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

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

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

//  Your code

    }

});

Podemos codificar como seguindo também, eu usei blur evento aqui.

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

Eu normalmente uso on vez 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!


Eu tenho um link para um objeto que contém muitos campos de entrada, o que requer ser tratado pelo mesmo evento. Então eu simplesmente uso find () para pegar 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 um nível abaixo, o método children () em vez de find () pode ser usado.


Outra alternativa, supondo que seus elementos sejam armazenados como variáveis ​​(o que geralmente é uma boa idéia se você os acessa 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 que você use referências.


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.


Além dos excelentes exemplos e respostas acima, você também pode fazer um "find" 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 produzir "HelloWorld".


Isso pode funcionar:

expect($("#message_div").css("display")).toBe("none");




jquery events