Ajax.ActionLink in Dynamic HTML fails to work as Ajax call

Question

In my ASP.NET MVC 5 application I have a Main View (Pharmacy.cshtml) which is rendering two partial views

1. Search form (_SearchFform.cshtml)
2. Results Grid (Kend UI MVC wrappers) _ResultsGrid.cshtml

In my result grid I have a column that is using Ajax.ActionLink when I click on that action Link my page is redirected.

To test by unobtrusive and jQuery Validation reference I have placed a Ajax.ActionLink on the main view along with 2 partial views.

When I click on that Ajax link on main view that will work as ajax, but the action link in grid doesn't work as ajax.

I believe the problem here is the grid data is loaded vial ajax call based on user search criteria and this data is loaded via Ajax the markup in the GRID is not properly registered on to the DOM and hence it is not recognizing the unobtrusive and jQuery Validation references.

Any Idea how to resole this issue

Code:

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")
}

Results Grid View (_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" })

Generated Anchor tag markup

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

Important: Grid data will be populated using jQuery call. When user clicks on submit button on search form, I do event.preventDefault() and execute the below code

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

Update: Found the problem, it is; no jquery events are fired on dynamic html added to the grid. Tried all below

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

But if I run any of these events on Google chrome console and then click on Map button then it works as expected(Click event will fire).

So I am wondering if there is a way to register the click event to the DOM after grid results are loaded (dynamic Markup).

Answer 1

Finally got this working

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