Метод JQuery .on () с несколькими обработчиками событий для одного селектора

Question

Попытка выяснить, как использовать метод Jquery .on () с определенным селектором, с которым связано несколько событий.Ранее я использовал метод .live (), но не совсем уверен, как выполнить то же умение с помощью .on ().Пожалуйста, посмотрите мой код ниже:

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

Я знаю, что могу назначить несколько событий, позвонив по телефону:

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

Но я считаю, что правильное использование .on () было бы так:

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

Есть ли способ сделать это?Или какова лучшая практика здесь?Я попробовал код ниже, но без игры в кости.

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

Заранее спасибо!

Answer 1

Это наоборот .Вы должны написать:

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

Answer 2

Кроме того, если у вас есть несколько обработчиков событий, подключенных к одному и тому же селектору, выполняющему одну и ту же функцию, вы можете использовать

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

Answer 3

Если вы хотите использовать одну и ту же функцию для разных событий, можно использовать следующий блок кода

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

Answer 4

Я узнал кое-что действительно полезное и фундаментальное из здесь .

цепочка функций очень полезна в этом случае, которая работает на большинстве функций jQuery, включая на Вывод функции тоже.

Это работает, потому что вывод большинства функций jQuery - это наборы объектов ввода, поэтому вы можете использовать их сразу и сделать их короче и умнее

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

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

Answer 5

И вы можете комбинировать одни и те же события / функции следующим образом:

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

Answer 6

Попробуйте ввести следующий код:

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

  }
);