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

Question

在我的ASP。. NET MVC 5应用程序，我有一个Main View (Pharmacy.cshtml)渲染两个部分视图

1. 搜索表单(_searchform .cshtml)
2. Results Grid (end UI MVC wrapper) _ResultsGrid.cshtml

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

为了测试不引人注目的和jQuery验证参考，我放置了一个Ajax。ActionLink在主视图和2个部分视图。

当我点击主视图上的Ajax链接时，它会像Ajax一样工作，但是grid中的action链接不会像Ajax一样工作

我相信这里的问题是网格数据是加载的ajax调用基于用户的搜索条件，这些数据是通过ajax加载的，在grid中的标记没有正确注册到DOM，因此它不识别不显眼的和jQuery验证引用。

你知道如何解决这个问题吗

代码:

Main View (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!");  
});

但是如果我在谷歌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);
});