JQuery 在父页面中未在部分视图中检测到 id 元素

Question

我有一个动态 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;
  })
};

Answer 1

那是因为 ID 必须是唯一的 所以 jQuery 将 return 只有一个。考虑使用 class 来标识您的按钮，例如：

class="delete-site"

然后将您的 jQuery 更改为（我们也将事件委托给 n 个项目，因此只有一个事件，这意味着稍后通过 AJAX 添加的项目仍将被注册对于此事件）：

$(document).on("click", ".delete-site", function () {
    alert("hai");
    return false;
});

Answer 2

在你的代码中有一个循环

 @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;
});

JQuery 在父页面中未在部分视图中检测到 id 元素

JQuery in parent page not detecting id element in partial view

javascript

jquery

asp.net-mvc

asp.net-mvc-4

razor