ASP.NET MVC中点击表格元素模态框标题及ID获取异常问题

嘿，我一眼就看到问题所在啦！核心问题出在重复的ID和错误的事件绑定逻辑上，咱们一步步来修复：

问题根源 #

1. 重复ID违反HTML规则：你在循环里给每个按钮都设置了id="dailybatchTask"，但HTML要求页面内的ID必须唯一，所以浏览器只会识别第一个带这个ID的元素，后面的按钮自然触发不了事件。
2. JS选择器错误：你的JavaScript代码里写的$('dailybatchTask')少了ID选择器的#符号，就算加上#，也因为重复ID只能作用于第一个元素。

修正步骤 #

1. 把按钮的ID改成类（关键！） #

将循环生成的按钮的id="dailybatchTask"替换为class="dailybatchTask"，这样所有按钮都能通过类选择器被选中：

<div class="col-lg-6"> 
  <div class="container-fluid" id="DailyTask"> 
    <h4>Daily Tasks</h4> 
    @if (Model != null) { 
      List<SchedulerTool.Models.spGetDailyBatchTask_Result> batches = Model.DailyTask; 
      foreach (var batch in batches) { 
        <div class="bs-callout bs-callout-warning" id="dailybatch"> 
          <!-- 隐藏域的ID有空格问题，建议改成唯一ID或者直接删掉（因为已经用data属性存了值） -->
          <input name="currentdailyBatchId" id="dailybatchId_@batch.BatchId" hidden type="text" value="@batch.BatchId" /> 
          <input name="currentdailyBatchName" id="dailybatchName_@batch.BatchId" hidden type="text" value="@batch.BatchName" /> 
          <!-- 把id改成class -->
          <button class="btn btn-group-justified dailybatchTask" data-title="@batch.BatchName" data-target="#dailybatchTaskModal" data-toggle="modal" data-bid="@batch.BatchId"> 
            <span class="fa-bitbucket-square">@batch.BatchName</span> 
          </button> 
        </div> 
      } 
    } 
  </div> 
</div>

2. 修正JavaScript事件绑定 #

用类选择器绑定事件，如果你是动态生成这些按钮（比如异步加载数据），推荐用事件委托绑定到父元素上，确保新添加的元素也能触发事件：

// 事件委托写法（推荐，支持动态元素）
$('#DailyTask').on('click', '.dailybatchTask', function () { 
  var batchId = $(this).data('bid'); 
  var batchName = $(this).data('title'); 
  // 设置模态框标题，注意选择器要和你模态框的标题ID完全匹配
  $("#bathDailyTaskModalLabel").html(batchName); 
  // 加载表格的逻辑保持不变
  loadMasterTable("LoadObjectsNotBatched", batchId, DailyBatchElementUrl, "DailyBatchCollapseElementId"); 
});

// 如果是静态渲染的元素，也可以直接绑定类选择器
// $('.dailybatchTask').on('click', function () { ... })

额外检查项 #

• 打开浏览器控制台（F12），查看有没有「找不到元素」的报错，这能快速帮你定位选择器是否正确。
• 确认模态框的标题选择器#bathDailyTaskModalLabel和页面中实际的标题ID一致，比如如果标题是<h4 id="bathDailyTaskModalLabel">...</h4>，那选择器就没问题。

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