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

IT技术 javascript jquery jquery-selectors jquery-1.7
2021-01-23 22:49:39

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

提前致谢！

6个回答

这是周围的其他方法。你应该写：

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");
为什么不是选择器$("table.planning_grid td")？
2021-03-13 22:49:39
@Muers，它也可以工作并且提问者承认如此，但也认为他应该将事件绑定在<table>而不是每个单独的<td>元素上，这确实是正确的方法。
2021-03-15 22:49:39
有一个很好的理由在 <table> 上使用 .on 而不是在 <td> 上，如果您稍后动态添加 <td> 。$('table td').on... 只会影响调用此函数时表中的 <td>。$('table').on(... ,'td',function...) 将影响您稍后将添加到此表中的任何 <td>。
2021-03-18 22:49:39
@Raanan，事实上，此外，每个注册的事件处理程序都有成本，尽管很小。当您处理数千个单元格时，必须在<table>每个<td>元素上注册一个处理程序而不是一个处理程序，以实现可用的性能。
2021-03-20 22:49:39
同意。很难用谷歌搜索这个问题，因为“on”是一个很常见的词，而且大多数结果都与.bind和相关.live。很好的答案，正是我想要的 :D @Frédéric - 您的链接不再链接到idjquery 文档页面上的标题。可能是更新文档的结果。但是我在那个页面上找不到这个答案。
2021-04-01 22:49:39

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

$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});
这就是我要找的
2021-03-29 22:49:39
...然后使用 e.type 获取实际触发的事件类型（在将事件添加为参数后，即 ...function(e)...
2021-04-10 22:49:39

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

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

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

链接功能是非常有用的在这种情况下，其中大多数jQuery的功能，包括适用于功能输出过。

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

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

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

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

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    'click blur paste' : function() {
        // Handle click...
    }
}, "input");
其它你可能感兴趣的问题
上一篇等效于 jQuery .hide() 来设置可见性：隐藏 下一篇如何在 iPhone 上的方向更改时重置 Web 应用程序的比例/缩放？