Método JQuery .on () com vários manipuladores de eventos em um seletor


139

Tentando descobrir como usar o método Jquery .on () com um seletor específico que possui vários eventos associados a ele. Eu estava usando o método .live () anteriormente, mas não tinha muita certeza de como realizar o mesmo feito com .on (). Por favor, veja meu código abaixo:

$("table.planning_grid td").live({
  mouseenter:function(){
     $(this).parent("tr").find("a.delete").show();
  },
  mouseleave:function(){
     $(this).parent("tr").find("a.delete").hide();        
  },
  click:function(){
    //do something else.
  }
});

Eu sei que posso atribuir os vários eventos chamando:

 $("table.planning_grid td").on({
    mouseenter:function(){  //see above
    },
    mouseleave:function(){ //see above
    }
    click:function(){ //etc
    }
  });

Mas acredito que o uso adequado de .on () seria assim:

   $("table.planning_grid").on('mouseenter','td',function(){});

Existe uma maneira de conseguir isso? Ou qual é a melhor prática aqui? Eu tentei o código abaixo, mas não há dados.

$("table.planning_grid").on('td',{
   mouseenter: function(){ /* event1 */ }, 
   mouseleave: function(){ /* event2 */ },
   click: function(){  /* event3 */ }
 });

Desde já, obrigado!

Respostas:


252

É o contrário . Você deve escrever:

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");

1
Por que o seletor não é $("table.planning_grid td")?
— Muers

11
@Muers, ele também iria funcionar e o interlocutor reconhece-lo, mas também acredita que ele deveria ligar o evento no <table>lugar de cada indivíduo <td>elemento, que é realmente o caminho certo a seguir.
— Frédéric Hamidi

37
Há um bom motivo para usar o .on na <table> e não no <td> e é se você adicionar dinamicamente <td> s posteriormente. $ ('table td'). on ... afetará apenas os <td> que estão na tabela no momento em que você chama esta função. $ ('table'). on (..., 'td', function ...) afetará qualquer <td> que você adicionar posteriormente a esta tabela.
— Raanan

8
@ Raanan, de fato, e além disso, todo manipulador de eventos que se registra tem um custo, embora pequeno. Quando você lida com milhares de células, o registro de um único manipulador no <table>lugar de um manipulador por <td>elemento torna-se obrigatório para obter um desempenho utilizável.
— Frédéric Hamidi

1
Acordado. Muito difícil colocar essa pergunta no google como 'on' é uma palavra tão comum e a maioria dos resultados estava relacionada a .binde .live. Boa resposta, exatamente o que eu estava procurando: D @ Frédéric - Seu link não está mais vinculado a um cabeçalho idna página jquery docs. Provavelmente resultado de documentação atualizada. Mas não consegui encontrar esta resposta nessa página.
— nzifnab

186

Além disso, se você tiver vários manipuladores de eventos conectados ao mesmo seletor executando a mesma função, poderá usar

$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});

5
isto é o que eu estava procurando
— ROZZA

... e, em seguida, obter o tipo de evento disparado real com e.type (depois de adicionar o evento como um parâmetro, ou seja ... function (e) ...
— William T. Mallard

24

Se você deseja usar a mesma função em eventos diferentes, o seguinte bloco de código pode ser usado

$('input').on('keyup blur focus', function () {
   //function block
})

11

Aprendi algo realmente útil e fundamental a partir daqui .

funções de encadeamento é muito útil nesse caso, que funciona na maioria das funções do jQuery, incluindo também na saída da função.

Funciona porque a saída da maioria das funções do jQuery são os conjuntos de objetos de entrada, para que você possa usá-los imediatamente e torná-los mais curtos e inteligentes

function showPhotos() {
    $(this).find("span").slideToggle();
}

$(".photos")
    .on("mouseenter", "li", showPhotos)
    .on("mouseleave", "li", showPhotos);

7

E você pode combinar os mesmos eventos / funções desta maneira:

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    'click blur paste' : function() {
        // Handle click...
    }
}, "input");

1

Tente com o seguinte código:

$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change', 
  function() {

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