如何通过ID或data属性获取按钮点击动态值？多同ID按钮点击失效问题

嘿，我来帮你搞定这个按钮点击失效的问题！首先得明确一个核心的HTML规则：页面中的id属性必须是唯一的，你给所有按钮都设置了id="btnids"，浏览器在查找元素时只会返回第一个匹配该id的元素，这就是为什么只有第一个按钮能触发点击事件的原因。

下面给你两种可行的解决办法，以及如何获取按钮的动态值：

方法一：用class替代重复的id #

把按钮的id换成class，这样就能选中所有按钮并绑定点击事件：

<table border="1">
  <tr>
    <td>Name</td>
    <td>Email</td>
    <td>phone</td>
    <td>Btn</td>
  </tr>
  <tr>
    <td>user 1</td>
    <td>user1@mail.com</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a1" value="a1">active</button>
    </td>
  </tr>
  <tr>
    <td>user 2</td>
    <td>user2@mail.com</td>
    <td>654321</td>
    <td>
      <button class="btnids" data-id="a2" value="a2">active</button>
    </td>
  </tr>
  <tr>
    <td>user 3</td>
    <td>user3@mail.com</td>
    <td>987654</td>
    <td>
      <button class="btnids" data-id="a3" value="a3">active</button>
    </td>
  </tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // 用class选择器选中所有按钮
  $(".btnids").click(function(){
    // 获取按钮的value属性值
    const btnValue = $(this).val();
    // 获取data-id属性值，jQuery的data()方法可以直接省略data-前缀
    const dataId = $(this).data("id");
    alert(`Value: ${btnValue}, Data-ID: ${dataId}`);
  });
});
</script>

方法二：事件委托（推荐用于动态生成的按钮） #

如果你的按钮是后续通过JS动态添加到页面的，直接绑定class的点击事件可能会失效，这时候用事件委托更靠谱——监听父元素的点击事件，再判断触发事件的是不是目标按钮：

<table border="1" id="userTable">
  <!-- 表格内容和上面一致 -->
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // 监听表格的点击事件，把事件委托给.btnids按钮
  $("#userTable").on("click", ".btnids", function(){
    const btnValue = $(this).val();
    const dataId = $(this).data("id");
    alert(`Value: ${btnValue}, Data-ID: ${dataId}`);
  });
});
</script>

关键知识点补充 #

• 重复id的危害：HTML规范里id是元素的唯一标识，重复的id会导致DOM查询异常，还可能引发样式、脚本的各种隐性问题，一定要避免。
• 动态值获取技巧：
  • 对于value属性，直接用$(this).val()即可获取。
  • 对于data-*自定义属性，jQuery的data()方法可以简化获取逻辑，比如data-id直接用data("id")就能拿到值。

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