Question

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

Answer 1

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

class="delete-site"

然后将你的jQuery更改为（我们也委托事件，因此只有一个事件可用于n个项目，这意味着以后通过AJAX添加的项目仍将为此事件注册）：< / p>

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

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

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

然后用

替换脚本

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

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

2 个答案: