JQuery .on () z wieloma programami obsługi zdarzeń do jednego selektora

Próbuję dowiedzieć się, jak użyć metody Jquery .on () z określonym selektorem, z którym jest powiązanych wiele zdarzeń. Wcześniej korzystałem z metody .live (), ale nie byłem pewien, jak wykonać to samo zadanie z .on (). Zobacz mój kod poniżej:

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

Wiem, że mogę przypisać wiele wydarzeń, dzwoniąc pod numer:

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

Ale uważam, że właściwe użycie .on () wyglądałoby tak:

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

Czy istnieje sposób, aby to osiągnąć? Albo jaka jest tutaj najlepsza praktyka? Wypróbowałem poniższy kod, ale bez kości.

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

Z góry dziękuję!

To jest na odwrót . Powinieneś napisać:

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

Ponadto, jeśli masz wiele programów obsługi zdarzeń dołączonych do tego samego selektora wykonującego tę samą funkcję, możesz użyć

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

Jeśli chcesz używać tej samej funkcji w różnych zdarzeniach, możesz użyć następującego bloku kodu

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

Dowiedziałem się coś naprawdę przydatnego i fundamentalnej z tutaj .

tworzenie łańcuchów funkcji jest w tym przypadku bardzo przydatne, co działa w przypadku większości funkcji jQuery, w tym również na wyjściu funkcji.

Działa, ponieważ wyjście większości funkcji jQuery to zestawy obiektów wejściowych, dzięki czemu można ich używać od razu i sprawić, by było krótsze i inteligentniejsze

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

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

Możesz łączyć te same zdarzenia / funkcje w ten sposób:

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

Spróbuj z następującym kodem:

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

  }
);