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.