无法在网格中的锚元素上触发单击事件答案

【问题标题】：Cannot fire click event on anchor element in a grid无法在网格中的锚元素上触发单击事件
【发布时间】：2023-03-16 14:05:02
【问题描述】：

我指的是 Dino Esposito 的这篇文章，关于如何使用 bootstrap 和 jquery 设置可以编辑数据的弹出表单；

https://www.simple-talk.com/dotnet/asp.net/modal-input-forms-in-asp.net-mvc/

我的问题是我无法用数据初始化表单。

我的看法是这样的；

@using Tac.P2.Web.ViewModels
@model Tac.P3.Model.Tender

@{
    ViewBag.Title = "List of Tenders";
    const int ColumnPosition = 6;
    var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<TenderLineViewModel>(
        "tenders",
        dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
        methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
        pager: true,
        rowsNumbers: true,
        rowsNumber: 20,
        shrinkToFit: true,
        editingUrl: Url.Action("UpdateTender"),
        sortingName: "Title", sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,
        url: Url.Action("GridData"),
        viewRecords: true)
        .FilterToolbar(new Lib.Web.Mvc.JQuery.JqGrid.JqGridFilterToolbarOptions { StringResult = true })
        .Navigator(new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorOptions()
                       {
                           Add = false,
                           Edit = false,
                           Delete = false,
                           Search = false
                       });
}

<div class="mainPage">
    <fieldset>
        <legend>List of Tenders</legend>
        @Html.Partial("_Messages")
        <div style="padding-bottom: 10px;" class="bootstrapLink">
            <a href="#add-tender-form" class="btn btn-info btn-xs" data-toggle="modal">Add New Tender</a>
        </div>
        @grid.GetHtml()
    </fieldset>
</div>
@Html.Partial("_AddTender")
@Html.Partial("_EditTender")
@Html.Partial("_ViewTender")
@section scripts
{
    <script type="text/javascript">
        $(function () {
            @grid.GetJavaScript()

            $(".btn.btn-info.btn-xxs.get-tender").on("click", function () {
                var $this = $(this);
                var tenderId = $this.data('tac-get-tender-id');
                var url = $this.data('url') + '/' + tenderId;
                $.ajax({
                    url: url,
                    cache: false
                }).done(function (data) {
                    $("#Title").val(data.Title);
                    $("#EstimateNumber").val(data.EstimateNumber);
                });
            });
        });
    </script>
}

具体来说，当锚点被点击时，这一行不会触发点击事件；

$(".btn.btn-info.btn-xxs.get-tender").on("click", function () {...

网格与相关单元格一起呈现；

<td title="View Edit" role="gridcell" aria-describedby="tenders_Links">
        <span class="bootstrapLink">
            <a class="btn btn-info btn-xxs get-tender" href="#view-tender-form" data-toggle="modal" data-tac-get-tender-url="/Tender/Get" data-tac-tender-id="1">View</a>
        </span> 
        <span class="bootstrapLink">
            <a class="btn btn-info btn-xxs get-tender" href="#edit-tender-form" data-toggle="modal" data-tac-get-tender-url="/Tender/Get" data-tac-tender-id="1">Edit</a>
        </span>
    </td>

href 中提到的元素，即#view-tender-form 和#edit-tender-form 可以在包含弹出表单的部分视图中找到。这些表单呈现正常，但不会由数据填充，因为锚点单击事件不会触发。那么我该如何解决呢？

【问题讨论】：

如果网格是动态加载的（即在加载 DOM 之后），那么看看这个问题：stackoverflow.com/questions/1359018/…
是的，但我已经在使用 on 命令了
但不正确。将其更改为$("body").on("click",".btn.btn-info.btn-xxs.get-tender", function () {...
是的，这就是问题所在。现在修好了谢谢。如果你回复这个作为答案，我会给你打勾！

标签： jquery twitter-bootstrap

【解决方案1】：

包含 div .btn.btn-info.btn-xxs 的 DOM 部分正在动态加载。

所以这个：

$(".btn.btn-info.btn-xxs.get-tender").on("click", function () {...

需要改成这样：

$("body").on("click",".btn.btn-info.btn-xxs.get-tender", function () {...

在这个问题中阅读所有相关信息：In jQuery, how to attach events to dynamic html elements?

【讨论】：