MVC应用表格仅首行按钮生效问题排查求助

Hey there, let's break down why only your first row's buttons are responding—this is a classic issue caused by duplicate IDs in your HTML, plus some event binding missteps. Here's what's going wrong and how to fix it:

The Core Problem: Duplicate IDs #

In your foreach loop, you're generating buttons and modals with the same IDs (btnRun, myBtn, myModal) for every row. But HTML requires all IDs to be unique in the DOM. When your JavaScript code tries to select elements by ID (like $("#btnRun") or document.getElementById('myBtn')), the browser only picks the first matching element it finds. That's why only your first row works!

Step-by-Step Fixes #

1. Fix the "Run Script" Buttons #

First, let's update the button markup and event handling to work for all rows:

• Replace the duplicate id="btnRun" with a class (class="btnRun").
• Store the scriptId as a data attribute on the button instead of embedding it in the onclick (cleaner and more maintainable).
• Use event delegation in jQuery to handle clicks for all dynamically generated buttons.

Modified button markup in your loop:

<td>
  <input class="btnRun" type="button" value="Run Script" data-script-id="@item.scriptId" />
</td>

Updated jQuery for the run button:

$(document).ready(function () {
  // Use event delegation to listen for clicks on any .btnRun button
  $(document).on('click', '.btnRun', function () {
    const scriptId = $(this).data('script-id');
    $.getJSON('@Url.Action("RunScript")', { scriptId: scriptId }, function (data) {
      console.log(data);
    });
  });
});

2. Fix the Error Modal Buttons & Modals #

Same issue here—duplicate myBtn and myModal IDs. Let's make each modal unique and link buttons to their corresponding modals:

• Give each modal a unique ID using the item's scriptId (e.g., id="myModal-@item.scriptId").
• Change the error button to use a class (class="myBtn") and add a data attribute pointing to its modal ID.
• Update the modal event handling to use delegation and target the correct modal.

Modified error button and modal markup in your loop:

@if (item.Errors == "No Errors") {
  <td>@Html.DisplayFor(modelItem => item.Errors)</td>
} else {
  <td style="cursor:pointer">
    <a class="myBtn" data-modal-id="myModal-@item.scriptId" class="btn-group">@Html.DisplayFor(modelItem => item.Errors)</a>
  </td>
}

<!-- Unique modal ID per row -->
<div id="myModal-@item.scriptId" class="modal">
  <div class="modal-content" style="padding-top: 10px; padding-left: 10px; padding-right:30px; left: 50px; top: 70px; width: 70%; height: 50%; ">
    <span class="close">&times;</span>
    <p style="line-break:strict">@Html.DisplayFor(modelItem => item.ErrorList)</p>
  </div>
</div>

Updated modal JavaScript:

// Handle modal opens using delegation
$(document).on('click', '.myBtn', function () {
  const modalId = $(this).data('modal-id');
  $('#' + modalId).css('display', 'block');
});

// Handle modal closes for all modals
$(document).on('click', '.close', function () {
  $(this).closest('.modal').css('display', 'none');
});

// Close modal when clicking outside
$(window).on('click', function (event) {
  if ($(event.target).hasClass('modal')) {
    $(event.target).css('display', 'none');
  }
});

Key Takeaways #

• Never reuse IDs in HTML—always use classes for elements that repeat, or generate unique IDs with dynamic values (like your scriptId).
• Event delegation is the best way to handle clicks for dynamically generated elements (like rows in a loop) because it binds the event to a parent element that exists when the page loads, then listens for events on child elements.

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