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