JQuery 在父页面中未在部分视图中检测到 id 元素
JQuery in parent page not detecting id element in partial view
我有一个动态 id 元素 "deleteSite"(在局部视图中)单击该元素将从 table 中删除站点。当我点击它时, jquery 函数(在父页面中)没有被调用,除了第一个元素。请帮我看看这里出了什么问题。
页面最初加载正常,但在分页期间通过ajax加载
这是我的部分观点
@model IPagedList<MvcSIMS.Models.Site>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th style="width: auto;">SlNo</th>
<th>SiteName</th>
<th>Remarks</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
{
<tr>
<td>@(item.Index + ((Model.PageNumber - 1) * Model.PageSize) + 1)</td>
<td>@Html.DisplayFor(modelItem => item.Data.SITENAME)</td>
<td>@Html.DisplayFor(modelItem => item.Data.REMARKS)</td>
<td>
<a href="@Url.Action("Edit", new { id = item.Data.ID })" class="btn btn-sm btn-primary">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>
<a id="deleteSite" href="@Url.Action("Delete", new { id = item.Data.ID })"
class="btn btn-sm btn-danger delete">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
</tr>
}
</tbody>
</table>
这是我的 jquery 正在做的事情 -
$(function () {
//Delete function
$("#deleteSite").click(function () {
alert("hai");
return false;
})
};
那是因为 ID 必须是唯一的 所以 jQuery 将 return 只有一个。考虑使用 class 来标识您的按钮,例如:
class="delete-site"
然后将您的 jQuery 更改为(我们也将事件委托给 n 个项目,因此只有一个事件,这意味着稍后通过 AJAX 添加的项目仍将被注册对于此事件):
$(document).on("click", ".delete-site", function () {
alert("hai");
return false;
});
在你的代码中有一个循环
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
在其中执行此操作
<a id="deleteSite" href="@Url.Action("Delete", new { id = item.Data.ID })"
这意味着 "deleteSite" 将出现的次数与模型中的项目一样多。这是无效的,因为每个 ID 在页面/子页面中必须是唯一的。
您可以尝试使用 class 或数据属性来代替。
<a class="deleteSite" href="@Url.Action("Delete", new { id = item.Data.ID })"
然后将脚本替换为
$('.delete-site').on("click", function () {
alert("hai");
return false;
});
我有一个动态 id 元素 "deleteSite"(在局部视图中)单击该元素将从 table 中删除站点。当我点击它时, jquery 函数(在父页面中)没有被调用,除了第一个元素。请帮我看看这里出了什么问题。
页面最初加载正常,但在分页期间通过ajax加载
这是我的部分观点
@model IPagedList<MvcSIMS.Models.Site>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th style="width: auto;">SlNo</th>
<th>SiteName</th>
<th>Remarks</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
{
<tr>
<td>@(item.Index + ((Model.PageNumber - 1) * Model.PageSize) + 1)</td>
<td>@Html.DisplayFor(modelItem => item.Data.SITENAME)</td>
<td>@Html.DisplayFor(modelItem => item.Data.REMARKS)</td>
<td>
<a href="@Url.Action("Edit", new { id = item.Data.ID })" class="btn btn-sm btn-primary">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>
<a id="deleteSite" href="@Url.Action("Delete", new { id = item.Data.ID })"
class="btn btn-sm btn-danger delete">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
</tr>
}
</tbody>
</table>
这是我的 jquery 正在做的事情 -
$(function () {
//Delete function
$("#deleteSite").click(function () {
alert("hai");
return false;
})
};
那是因为 ID 必须是唯一的 所以 jQuery 将 return 只有一个。考虑使用 class 来标识您的按钮,例如:
class="delete-site"
然后将您的 jQuery 更改为(我们也将事件委托给 n 个项目,因此只有一个事件,这意味着稍后通过 AJAX 添加的项目仍将被注册对于此事件):
$(document).on("click", ".delete-site", function () {
alert("hai");
return false;
});
在你的代码中有一个循环
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
在其中执行此操作
<a id="deleteSite" href="@Url.Action("Delete", new { id = item.Data.ID })"
这意味着 "deleteSite" 将出现的次数与模型中的项目一样多。这是无效的,因为每个 ID 在页面/子页面中必须是唯一的。
您可以尝试使用 class 或数据属性来代替。
<a class="deleteSite" href="@Url.Action("Delete", new { id = item.Data.ID })"
然后将脚本替换为
$('.delete-site').on("click", function () {
alert("hai");
return false;
});