如何精简单个元素上绑定多个事件的jQuery代码？

嗨，很高兴能帮你解决这个问题～ 你当前分别为.btn-vote绑定click和dblclick事件的代码，其实可以用jQuery提供的更简洁的方式来优化，先看看你原本的代码：

$(".btn-vote").click(function(){ //bla bla }); 
$(".btn-vote").dblclick(function(){ //bla bla });

下面是两种常用且易维护的精简方案：

方案1：使用.on()的事件映射对象（推荐） #

这是jQuery 1.7+官方推荐的多事件绑定方式，把所有事件与对应的处理函数封装在一个对象中，结构清晰，后期维护也更方便：

$(".btn-vote").on({
  click: function() {
    // 这里编写click事件的处理逻辑
  },
  dblclick: function() {
    // 这里编写dblclick事件的处理逻辑
  }
});

方案2：链式调用写法 #

如果你的事件处理逻辑比较简短，也可以用链式调用的方式，减少重复选择DOM元素的操作：

$(".btn-vote")
  .click(function() { /* click事件逻辑 */ })
  .dblclick(function() { /* dblclick事件逻辑 */ });

额外提示 #

• 优先选择方案1，因为它的扩展性更好，后续要新增其他事件（比如mouseenter）时，直接在对象里添加新的键值对即可。
• 如果你使用的是jQuery 1.7之前的版本，可以用.bind()方法实现类似的事件映射写法，语法和.on()一致。

内容的提问来源于stack exchange，提问作者tamlevn