JQuery 无法使用多个元素的相同名称

Question

在 Razor View 中，我为 table

编写了 html 代码

<tbody>
                                @foreach (var item in Model.TodaysVM)
                                {
                                    <tr>
                                        <td>@item.OrderId</td>
                                        <td>@item.WorkOrderType</td>
                                        <td>@item.CustomerId</td>
                                        <td>@item.CustomerName</td>
                                        <td>@item.AppointmentDate</td>
                                        <td>
                                            <button class="btn btn-primary btn-sm" id="addCustomActivity" data-id=@item.OrderId>Add Custom Activity</button>
                                        </td>
                                    </tr>
                                }
                            </tbody>

现在假设当单击按钮添加自定义 Activity 我需要提醒各自的值 @item.orderID table 中可能有多行并且每行包含按钮。 我的 JQuery 密码是：

 $("#addCustomActivity").click(function () {
                alert($(this).attr("data-id"));
            });

我工作正常，但问题是它只适用于 table 的第一行。该按钮不适用于第二行。我该如何解决这个问题，以便该按钮适用于每一行？

Answer 1

问题是 ID 必须始终是唯一的，如果您有多个具有相同 ID 的元素，它将始终 select 它找到的具有该 ID 的第一个元素

将class="btn btn-primary btn-sm" id="addCustomActivity"更改为class="btn btn-primary btn-sm addCustomActivity"

那么你可以使用：

$(".addCustomActivity").click(function () {
    alert($(this).attr("data-id"));
});

注意

你的标题 JQuery not working with same name of multiple elements 实际上可以工作，如果你有 name="addCustomActivity" 然后你的 jQuery 代码看起来像：

$("button[name=addCustomActivity]").click(function () {
    alert($(this).attr("data-id"));
});