Método JQuery .on () con múltiples controladores de eventos para un selector

139

Intentando descubrir cómo usar el método Jquery .on () con un selector específico que tiene múltiples eventos asociados. Anteriormente estaba usando el método .live (), pero no estoy muy seguro de cómo lograr la misma hazaña con .on (). Por favor vea mi código abajo:

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

Sé que puedo asignar varios eventos llamando:

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

Pero creo que el uso adecuado de .on () sería así:

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

¿Hay alguna manera de lograr esto? ¿O cuál es la mejor práctica aquí? Probé el código a continuación, pero sin dados.

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

¡Gracias por adelantado!

— butangphp
fuente

252

Eso es al revés . Deberías escribir:

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

— Frédéric Hamidi
fuente

1

¿Por qué no es el selector $("table.planning_grid td")?

— Mueres

11

@Muers, también funcionaría y el interlocutor lo reconoce, pero también cree que debería vincular el evento en <table>lugar de cada <td>elemento individual , que de hecho es el camino correcto.

— Frédéric Hamidi

37

Hay una buena razón para usar .on en <table> y no en <td> y es si agrega dinámicamente <td> s más tarde. $ ('table td'). on ... solo afectará a los <td> que están en la tabla en el momento en que llame a esta función. $ ('table'). on (..., 'td', function ...) afectará cualquier <td> que agregará a esta tabla más adelante.

— Raanan

8

@Raanan, de hecho, y además cada controlador de eventos que uno registra tiene un costo, aunque pequeño. Cuando se trata de miles de celdas, es obligatorio registrar un único controlador en <table>lugar de un controlador por <td>elemento para lograr un rendimiento utilizable.

— Frédéric Hamidi

1

Convenido. Muy difícil de buscar en Google esta pregunta como 'on' es una palabra tan común y la mayoría de los resultados estaban relacionados con .bindy .live. Buena respuesta, justo lo que estaba buscando: D @ Frédéric: su enlace ya no enlaza con un encabezado iden la página de jquery docs. Probablemente el resultado de la documentación actualizada. Pero no pude encontrar esta respuesta en esa página.

— nzifnab

186

Además, si tuviera varios controladores de eventos conectados al mismo selector que ejecutara la misma función, podría usar

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

— Pirijan
fuente

55

esto es lo que estaba buscando

— RozzA

... y luego obtenga el tipo de evento disparado real con e.type (después de agregar el evento como parámetro, es decir ... función (e) ...

— William T. Mallard

24

Si desea usar la misma función en diferentes eventos, puede usar el siguiente bloque de código

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

— thakurdev
fuente

11

Aprendí algo realmente útil y fundamental desde aquí .

encadenamiento de funciones es muy útil en este caso, que funciona en la mayoría de las funciones de jQuery incluidos en salida de la función también.

Funciona porque la salida de la mayoría de las funciones de jQuery son los conjuntos de objetos de entrada para que pueda usarlos de inmediato y hacerlo más corto e inteligente

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

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

— Iman
fuente

7

Y puede combinar los mismos eventos / funciones de esta manera:

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

— angelmedia
fuente

1

Pruebe con el siguiente código:

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

  }
);

— Yogesh
fuente