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

在Razor视图中，我已经为表编写了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>

---

我的工作很好，但问题是它只适用于表的第一行。第二排的按钮不起作用。如何解决此问题以使按钮适用于每一行？

问题是

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

代码将如下所示：

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

---

ID必须是唯一的。“相同的名称”-所有元素都没有

名称

属性<代码>id与

名称

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