使用jQuery监听多个按钮点击失效问题排查

看起来你的代码逻辑本身没问题，但大概率是踩了下面几个常见的坑，咱们逐个分析解决：

• 忘记引入jQuery库
  这是最容易忽略的点！如果页面没有先加载jQuery，$这个全局变量是未定义的，代码自然无法执行。你需要在自定义脚本之前引入jQuery，比如在<body>末尾添加：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

  也可以替换成你本地项目中jQuery文件的路径。

• 按钮是动态生成的（页面加载后才渲染）
  如果这些按钮是通过AJAX请求、或者后续JS代码动态添加到DOM中的，直接使用.click()绑定事件会失效——因为.click()只能为页面初始化时已存在的元素绑定事件。这种情况要改用事件委托，将事件绑定到一个始终存在的父元素（比如document）上，监听目标元素的点击：

  $(document).ready(function() {
    $(document).on('click', "[id^='button-event-status-']", function() {
      alert('it works');
    });
  });
  

  这样无论按钮是初始就存在，还是后续动态添加的，点击事件都能正常触发。

• 检查浏览器控制台的报错信息
  打开浏览器开发者工具（快捷键F12），切换到「Console」标签页，查看是否有报错提示。比如$ is not defined就对应未引入jQuery的问题，其他语法错误也能在这里快速定位。

另外，你当前使用的属性选择器逻辑是没问题的，只要解决了上面的任一问题，代码应该就能正常运行了。

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