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

JQuery in parent page not detecting id element in partial view

本文关键字：视图 检测 id 元素 JQuery      更新时间：2023-09-26

我有一个动态id元素"deleteSite"（在部分视图中），单击该元素将从表中删除站点。当我单击它时，除了第一个元素之外，没有调用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 只会返回一个。请考虑使用类来标识按钮，例如：

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在页面/子页面中必须是唯一的。

您可以尝试使用类或数据属性来执行此操作。

<a class="deleteSite" href="@Url.Action("Delete", new { id = item.Data.ID })"

然后将脚本替换为

$('.delete-site').on("click", function () {
  alert("hai");
  return false;
});
相关文章：