具有多个事件处理程序的 JQuery .on() 方法到一个选择器

Posted 2023-03-05

【中文标题】具有多个事件处理程序的 JQuery .on() 方法到一个选择器

【英文标题】：JQuery .on() method with multiple event handlers to one selector

【发布时间】：2012-01-26 08:19:07

【问题描述】：

试图弄清楚如何将 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】：

那是the other way around。你应该写：

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

【讨论】：

为什么选择器不是$("table.planning_grid td")？

@Muers，它也可以工作并且提问者承认这一点，但也认为他应该将事件绑定在<table> 而不是每个单独的<td> 元素上，这确实是正确的方法去。

有一个很好的理由在 上使用 .on 而不是在

上使用，如果你以后动态添加

s。 $('table td').on... 只会影响您调用此函数时表中的

。 $('table').on(... ,'td',function...) 将影响您稍后将添加到此表中的任何

。 @Raanan，确实，此外，每个注册的事件处理程序都有成本，尽管很小。当您处理数千个单元格时，必须在 <table> 上注册一个处理程序，而不是为每个 <td> 元素注册一个处理程序，以实现可用性能。 同意。很难用谷歌搜索这个问题，因为“on”是一个常见的词，大多数结果都与.bind 和.live 有关。好的答案，正是我正在寻找的：D @Frédéric - 您的链接不再链接到 jquery 文档页面上的标题 id。可能是更新文档的结果。但我在那个页面上找不到这个答案。

【参考方案2】：

另外，如果你有多个事件处理程序附加到同一个选择器执行相同的功能，你可以使用

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

【讨论】：

这就是我要找的

...然后使用 e.type 获取实际触发的事件类型（将事件添加为参数后，即 ...function(e)...

【参考方案3】：

如果你想在不同的事件上使用相同的函数，可以使用下面的代码块

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

【参考方案4】：

我从here 学到了一些非常有用和基本的东西。

链接函数在这种情况下非常有用，它适用于大多数 jQuery 函数，包括 on 函数输出。

之所以有效，是因为大多数 jQuery 函数的输出都是输入对象集，因此您可以立即使用它们并使其更短更智能

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


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

【参考方案5】：

您可以通过这种方式组合相同的事件/功能：

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

【参考方案6】：

试试下面的代码：

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

  
);