javascript - change - Método JQuery.on() con múltiples controladores de eventos en un selector

jquery select events

Question

Tratando de 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 proeza 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 los eventos múltiples 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 no dados.

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

¡Gracias por adelantado!

Answer 1

Además, si tuviera múltiples manejadores de eventos conectados al mismo selector ejecutando la misma función, podría usar

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

Answer 2

Aprendí algo realmente útil y fundamental a partir de here .

El encadenamiento de funciones es muy útil en este caso, que funciona en la mayoría de las funciones de jQuery, incluso en la salida de funciones.

Funciona porque el resultado 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);

Answer 3

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

Answer 4

Pruebe con el siguiente código:

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

  }
);

Answer 5

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

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

Answer 6

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