JQuery 不能使用多个元素的相同名称答案

【问题标题】：JQuery not working with same name of multiple elementsJQuery 不能使用多个元素的相同名称
【发布时间】：2020-08-25 08:53:02
【问题描述】：

在 Razor 视图中我已经为 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>

现在假设当单击按钮添加自定义活动时，我需要提醒各个@item.orderID 的值，表中可能有多行，并且每一行都包含该按钮。我的 JQuery 代码是：

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

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

【问题讨论】：

ID 必须是唯一的。
"same name" - 您的所有元素都没有name 属性。 id 与 name 不一样

标签： javascript html jquery jquery-ui razor

【解决方案1】：

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

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

那么你可以使用：

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

注意

如果您有 name="addCustomActivity" 并且您的 jQuery 代码如下所示，那么您的标题 JQuery not working with same name of multiple elements 将真正起作用：

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

【讨论】：