.NET Core应用中按钮点击事件未触发问题排查

看起来你遇到的问题主要有两个核心点：重复的元素ID和jQuery选择器错误，这两个问题叠加起来，导致按钮点击事件完全没触发。我来一步步帮你修复：

问题分析 #

1. 重复ID违反HTML规范：你在@foreach循环里给每个按钮都设置了id="btnCalcVS"，但HTML要求同一个页面内的元素ID必须唯一。浏览器只会识别第一个拥有该ID的元素，后面生成的按钮点击根本不会被绑定的事件捕获到。
2. jQuery选择器写错了：你的事件绑定代码里用了"btnCalcVS"作为选择器，这是在查找标签名为<btnCalcVS>的元素，而不是ID为btnCalcVS的元素。哪怕你加上#变成$("#btnCalcVS")，也只能解决第一个按钮的问题，后面的按钮还是无效，因为ID重复了。

修复步骤 #

1. 修改HTML中的按钮代码

把按钮的id换成class，同时可以加上data-*属性来传递当前客户的信息（比如名称，方便后面更新模态框标题）：

<td>
  <button class="btn btn-success btnCalcVS" type="button" 
          data-client-name="@client.Name"> 
    Calculate Validator Score
  </button>
</td>

2. 修正jQuery事件绑定代码

用类选择器.btnCalcVS来绑定事件，这样所有带这个类的按钮都会触发事件，同时可以利用data属性获取客户名称，动态更新模态框标题：

$(document).ready(function () {
  $(document).on("click", ".btnCalcVS", function () {
    alert("We are here");
    // 获取当前点击按钮对应的客户名称
    var clientName = $(this).data('client-name');
    // 更新模态框的标题
    $(".modal-title").text("Calculate Validator Score: " + clientName);
    // 弹出模态框
    $("#calculateVSModal").modal('show');
  });
});

为什么这样改？ #

• 用类选择器代替ID选择器：类可以重复使用，完美适配循环生成的多个按钮，确保每个按钮的点击事件都能被捕获。
• 使用data-*属性：可以轻松把后端的客户数据传递到前端JS中，不需要额外的DOM查询，代码更简洁。
• 事件委托($(document).on(...))：虽然这里按钮是页面加载时生成的，但用事件委托的方式绑定事件，即使后续动态添加按钮（比如分页加载新数据），事件依然能正常触发，扩展性更好。

完整修改后的关键代码片段 #

HTML部分（按钮）：

<tbody>
@foreach (var client in Model.Clients) {
<tr>
  <td>@client.Name</td>
  <td class="">
    <img src="@client.LogoUrl" class="img-rounded" height="100" width="100" />
  </td>
  <td>@client.Phone</td>
  <td>@client.Email</td>
  <td>
    <button class="btn btn-success btnCalcVS" type="button" 
            data-client-name="@client.Name"> 
      Calculate Validator Score
    </button>
  </td>
</tr>
}
</tbody>

jQuery部分：

<script type="text/javascript">
$(document).ready(function () {
  $(document).on("click", ".btnCalcVS", function () {
    alert("We are here");
    var clientName = $(this).data('client-name');
    $(".modal-title").text("Calculate Validator Score: " + clientName);
    $("#calculateVSModal").modal('show');
  });
});
</script>

这样修改后，每个按钮的点击事件都会正常触发，模态框也能正确弹出，还能显示对应的客户名称，一举两得！

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