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

【问题标题】：JQuery in parent page not detecting id element in partial view父页面中的 JQuery 未在部分视图中检测到 id 元素
【发布时间】：2015-01-15 08:40:10
【问题描述】：

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

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

这是因为 id 必须是唯一的，所以 jQuery 将只返回一个。考虑使用一个类来识别您的按钮，例如：

class="delete-site"

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

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

【讨论】：

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

您可以尝试使用类或数据属性来代替。

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

然后将脚本替换为

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

【讨论】：