基于jQuery 3.2.1实现带不同data属性按钮的点击事件分发问题

嘿，我帮你揪出代码里的几个关键问题啦，咱们一步步来搞定它：

1. jQuery选择器写错了！ #

你原来写的$("btn btn-primary btn-sm")是完全错误的类选择器用法——类选择器必须以.开头，而且多个类之间不能用空格（空格代表后代选择器，会找btn元素下的btn-primary元素，再找它下面的btn-sm元素，这显然不是你要的）。正确的写法应该是：

$(".btn.btn-primary.btn-sm")

如果想更精准，建议给每个按钮加个data-action属性（比如data-action="add-cpu"），这样选择器可以写成$("[data-action='add-cpu']")，就算以后按钮的样式类变了，事件绑定也不会受影响。

2. 点击分发逻辑的完整修正 #

假设你的ourClickDispatcher是用来区分不同按钮点击的，下面是一套完整的可运行代码，包含HTML和修正后的Builder类：

先写模拟的表格按钮HTML #

<table>
  <tr>
    <td><button class="btn btn-primary btn-sm" data-action="add-cpu">Add CPU</button></td>
    <td><button class="btn btn-primary btn-sm" data-action="add-memory">Add Memory</button></td>
    <td><button class="btn btn-primary btn-sm" data-action="add-disk">Add Disk</button></td>
  </tr>
</table>

修正后的Builder类代码 #

class Builder {
  constructor() {
    this.events();
  }

  events() {
    // 重点：如果你的按钮是动态生成的（比如AJAX加载表格），一定要用事件委托！
    // 把事件绑定到静态存在的父元素上（比如table），这样新生成的按钮也能触发事件
    $("table").on("click", ".btn.btn-primary.btn-sm", this.ourClickDispatcher.bind(this));
    
    // 如果按钮是页面加载时就存在的静态元素，也可以直接绑定：
    // $(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this));
  }

  ourClickDispatcher(e) {
    // 通过data-action属性判断点击的是哪个按钮
    const actionType = $(e.target).data("action");
    
    if (actionType === "add-cpu") {
      console.log("cpu clicked");
      // 这里放你加载CPU相关数据的逻辑
    } else if (actionType === "add-memory") {
      console.log("memory clicked");
      // 加载内存数据的逻辑
    } else if (actionType === "add-disk") {
      console.log("disk clicked");
      // 加载磁盘数据的逻辑
    }
  }
}

// 记得要在DOM加载完成后初始化Builder
$(document).ready(function() {
  new Builder();
});

3. 几个额外的小提醒 #

• 要是你的表格按钮是动态生成的（比如通过JS或AJAX添加的），一定要用事件委托，不然直接绑定的事件会对新生成的按钮无效。
• 用data-*属性标识按钮功能比依赖按钮文本靠谱多了——毕竟文本可能会因为翻译、样式修改而变化，但data-action属性可以一直保持稳定。
• 一定要确保在DOM加载完成后再初始化Builder，不然jQuery找不到按钮元素，绑定事件就白搭了。

这样修改之后，点击Add CPU按钮就能在控制台看到cpu clicked的输出啦！

内容的提问来源于stack exchange，提问作者Carol.Kar