jquery - 我只从 asp.net Razor View 中获取 jQuery 中的第一个 id

Question

我正在使用 asp.net mvc 和 Razor。这是我的代码

    @foreach (var item in Model)
    {
                <button class="btn btn-danger btn-xs" id="deleteSystemData" data-toggle="modal" data-target="#deleteModal" data-id="@item.SerialNumber">Delete reported data</button>
}

<script>
    window.onload = function () {
        var serialNumber;

        $('#deleteSystemData').click(function (e) {
            e.preventDefault();
            serialNumber = $(this).data('id');
            console.log("This number: " + serialNumber);
            $("#deleteModal #serial-number").text(serialNumber);
        });

        $('#deleteConfirmed').click(function () {
            $.ajax({
                url: '/MeterReading/DeleteSystemData',
                data: { serialNumber: serialNumber }
            }).done(function() {
                $('#deleteModal').modal('toggle');
                $("#delete-system-data-success").slideDown(500)
                  .delay(2500)
                  .slideUp(500);
            }).error(function () {
                $('#deleteModal').modal('toggle');
                $("#delete-system-data-error").slideDown(500)
                  .delay(2500)
                  .slideUp(500);
            }
            );
        });

    }
</script>

我在所有按钮上都得到了正确的data-id="@item.SerialNumber"。 但我的 jQuery 代码仅适用于第一个按钮。我在第一次点击事件中添加了一个 console.log (这个数字)，当我点击第一个按钮时，我在日志中得到一个 Id，但其余的在 jQuery 脚本中没有任何 Id。

我的目标是将 id 从按钮传递到 asp.net Controller 并删除具有该 id 的内容。我还有一个引导模式，但效果很好。

Answer 1

您不应该有多个具有相同 ID 的元素(可以将其放在纯 HTML 中，因为它不会破坏任何内容，但如果您想在这些 id 上使用 Jquery那么它是一个大NO!!!)如果你这样做，那么当你编写Jquery来选择具有id的元素时，它将始终返回DOM中从页面顶部开始的具有给定id的第一个元素。

解决方案: 向按钮添加类而不是 id，然后编写脚本来使用该类。

因此，如下更改 for 循环内的 HTML

 @foreach (var item in Model)
 {
  <button class="btn btn-danger btn-xs deleteSystemData" data-toggle="modal" data-target="#deleteModal" data-id="@item.SerialNumber">Delete reported data</button>
  }

注意 我已删除 id 并将其添加到类中

接下来将脚本部分更改为下面

$('.deleteSystemData').click(function (e) {
  e.preventDefault();
  serialNumber = $(this).data('id');
  console.log("This number: " + serialNumber);
  $("#deleteModal #serial-number").text(serialNumber);

});

注意我已将选择器#deleteSystemData更改为.deleteSystemData