Question

我指的是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>
}

具体而言，当单击锚点时，此行不会触发click事件;

$(".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，可以在包含弹出窗体的部分视图中找到。这些表单呈现正常，但不会被数据填充，因为锚点击事件不会触发。那么我该如何解决这个问题？

Answer 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?

无法在网格中的锚元素上触发click事件

1 个答案: