动态 HTML 中的 Ajax.ActionLink 无法作为 Ajax 调用工作

Question

在我的 ASP.NET MVC 5 应用程序中，我有一个 Main View (Pharmacy.cshtml)，它正在呈现两个部分视图

1. 搜索表单 (_SearchFform.cshtml)
2. 结果网格（Kend UI MVC 包装器）_ResultsGrid.cshtml

在我的结果网格中，当我单击该操作链接时，我有一列正在使用 Ajax.ActionLink，我的页面被重定向。

为了通过 unobtrusive 和 jQuery Validation 参考进行测试，我在主视图上放置了一个 Ajax.ActionLink 以及 2 个局部视图。

当我在主视图上单击该 Ajax 链接时，该链接将用作 ajax，但网格中的操作链接不能用作 ajax。

我认为这里的问题是网格数据是根据用户搜索条件通过 ajax 调用加载的，并且此数据是通过 Ajax 加载的，GRID 中的标记未正确注册到 DOM，因此它无法识别 unobtrusive 和 jQuery Validation 参考。

任何想法如何解决这个问题

代码：

主视图 (Pharmacy.cshtml)

<h2>@Html.Raw(ViewBag.Message)</h2>

@Html.Partial("_SearchPharmacy")

@Html.Partial("_PharmacyResults")   

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
}

结果网格视图 (_ResultsGrid.cshtml)

@model IEnumerable<ModelType>


@(Html.Kendo().Grid(Model)
    .Name("ResultsGrid")
    .Columns(columns =>
    {
 columns.Bound(p => p.PharmacyName);
  Ajax.ActionLink("Map", "GoogleMap", "Prescription", new { toAddress = "#= Address #" }, new AjaxOptions
         {
             OnSuccess = "ShowMapSuccessResponse"
         }, new { @class = "btn btn-default", id = "#= NCPDPID #" }).ToHtmlString()
           ).Title("");
    })
    .Events(ev => ev.DataBound("pxDataBound"))
    .Pageable()
    .Sortable()
        //.Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .ServerOperation(false)
                    .Read(r => r.Action("action", "controller", new { }))
     )
)

//this is the test Ajax Link. This one works fine
@Ajax.ActionLink("Map", "GoogleMap", "Controller", new { toAddress = "70 Brown st. City 11001" }, new AjaxOptions
    {
        OnSuccess = "ShowMapSuccessResponse"
    }, new { @class = "btn btn-default", id = "myid" })

生成的锚标记标记

<a class="btnGoogleMap" data-ajax="true" data-ajax-success="ResponseFunction" href="/Controller/GoogleMap?toAddress="address" id="3110082">Map</a>

重要： 网格数据将使用 jQuery 调用填充。当用户点击搜索表单上的提交按钮时，我执行event.preventDefault() 并执行以下代码

pxGrid.dataSource.read($("#SearchForm").serializeFormToJSON());

更新： 发现问题，就是；在添加到网格的动态 html 上不会触发任何 jquery 事件。 下面都试过了

$("a.btnGoogleMap").live("click", function () {
    e.preventDefault();
    alert("Goodbye!"); // jQuery 1.3+
});
$(document).delegate("a.btnGoogleMap", "click", function () {
    e.preventDefault();
    alert("Goodbye!"); // jQuery 1.4.3+
});
$(document).on("click", "a.btnGoogleMap", function () {
    e.preventDefault();
    alert("Goodbye!");  // jQuery 1.7+
});

$(document).on('click', '.btnGoogleMap', function (e) {
    e.preventDefault();
    alert("Goodbye!");  
});

但是，如果我在 Google chrome 控制台上运行这些事件中的任何一个，然后单击地图按钮，那么它会按预期工作（单击事件将触发）。

所以我想知道是否有办法在加载网格结果后将点击事件注册到 DOM（动态标记）。

Answer 1

终于搞定了

$(document).on('click', '.btnGoogleMap', function (e) {
    e.preventDefault();
    //console.log(e);
    //console.log(e.toElement.href);
    $.get(e.toElement.href, {}, ShowMapSuccessResponse);
});