如何解决jQuery无法使用多个元素的相同名称
在Razor View中,我已经编写了表格的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
必须始终唯一,如果您有多个具有相同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"));
});
注意
如果您拥有JQuery not working with same name of multiple elements
,则您的标题name="addCustomActivity"
实际上可以正常工作,然后您的jQuery
代码如下:
$("button[name=addCustomActivity]").click(function () {
alert($(this).attr("data-id"));
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。