JQuery .on（）方法，将多个事件处理程序连接到一个选择器

javascript jquery jquery-selectors jquery-1.7

2022-08-30 03:04:36

试图弄清楚如何将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 */ }
 });

提前致谢！

答案 1

反之亦然。你应该写：

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

答案 2

此外，如果将多个事件处理程序附加到执行相同函数的同一选择器，则可以使用

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

JQuery .on（） 方法，将多个事件处理程序连接到一个选择器

JQuery .on（）方法，将多个事件处理程序连接到一个选择器