Cannot fire click event on anchor element in a grid

Question

I am referring to this article by Dino Esposito on how to use bootstrap and jquery to set up popup forms where you can edit data;

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

My problem is that I cannot initialise the form with data.

My view looks like;

@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>
}

Specifically this line does not fire the click event when the anchor is clicked;

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

the grid renders with the relevant cell;

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

The elements referred to in the href, ie #view-tender-form and #edit-tender-form are to be found in the partial views which contain the popup forms. These forms render OK, but are not populated by the data because the anchor click event does not fire. So how do I fix this?

If the grid is being loaded dynamically (i.e. after the DOM is loaded), then have a look at this question: http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — mccannf, Aug 01 '14 at 20:30
But not correctly. Change it to `$("body").on("click",".btn.btn-info.btn-xxs.get-tender", function () {...` — mccannf, Aug 01 '14 at 23:49
Yes that was the problem. Fixed now thank you. If you reply with that as an answer I will give you a tick! — arame3333, Aug 04 '14 at 08:13

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

The part of the DOM containing the div .btn.btn-info.btn-xxs is being loaded dynamically.

So this:

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

Needs to be changed to this:

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

Read all about it in this question: In jQuery, how to attach events to dynamic html elements?

edited May 23 '17 at 12:11

Community

1
1

answered Aug 04 '14 at 20:51

mccannf

16,619
3
51
63

Cannot fire click event on anchor element in a grid

1 Answers1