'Click' event not firing after jqGrid is reloaded

Question

I have a form with search functionality, when information is searched a jqGrid is then populated. This jqGrid contains dynamically created buttons, these buttons when pressed populate another jqGrid with data (related to the row the button is contained in).

This all works the, the problem occurs when I return to the search box and re search for some different data. The first jqGrid loads as expected, however upon clicking the nested buttons, the 'Click' event now does not fire, which in turn does not populate the next jqGrid.

Index.js

$('#btnSearch').click(function () {
        var hfSearchURL = '#hfSearchURL';

        //Clear all tables
        $("#tblAccounts").GridUnload();
        $("#tblContracts").GridUnload();
        $("#tblSupplies").GridUnload();

        $("#tblAccounts").jqGrid({
            url: $(hfSearchURL).val(),
            datatype: "JSON",
            mtype: "POST",
            emptyrecords: "No Accounts",
            viewrecords: true,
            multiselect: false,
            shrinkToFit: true,
            autowidth: false,
            colName: ['Account ID', 'OrganisationName', 'AuthorisedSignatory', 'BankAccountName', 'BankAccountNumber', 'Select'],
            rowNum: 25,
            postData: {
                profileID: $('#txtProfileID').val()
            },

            loadComplete: function (r) {

            },
            colModel: [
                    { name: 'Account ID', jsonmap: 'AccountID', sortable: false, width: '200', },
                    { name: 'Organisation Name', jsonmap: 'OrganisationName', sortable: false, width: '200', },
                    { name: 'Authorised Signatory', jsonmap: 'AuthorisedSignatory', sortable: false, width: '200', },
                    { name: 'Bank Account Name', jsonmap: 'BankAccountName', sortable: false, width: '200', },
                    { name: 'Bank Account Number', jsonmap: 'BankAccountNumber', sortable: false, width: '200', },

                    {
                        name: 'Select', sortable: false, width: '200',
                        formatter: function (cellvalue, options, rowObj) {
                            return '<input id="' + 'act' + rowObj.AccountID + '" value="View Contracts" type="button">';
                        }
                    }
            ],

            caption: 'Accounts'

        });

    });

    **//THIS DOES NOT FIRE WHEN RE SEARCHING**
    $("#tblAccounts").on("click", "tbody tr td input", function () {
        var hfContractsURL = '#hfContractsURL';

        $("#tblContracts").GridUnload();

        $("#tblContracts").jqGrid({
            url: $(hfContractsURL).val(),
            datatype: "JSON",
            mtype: "POST",
            emptyrecords: "No Contracts",
            viewrecords: true,
            multiselect: false,
            shrinkToFit: true,
            autowidth: false,
            colName: ['Type', 'Contract Version', 'Contract Status', 'Contract Date'],
            rowNum: 25,
            postData: {
                accountID: $(this).attr('id').replace('act', '') // use dyanmically created input id
            },

            loadComplete: function (r) {


            },
            colModel: [
                    { name: 'Type', jsonmap: 'Type', sortable: false, width: '200', },
                    { name: 'Contract Version', jsonmap: 'ContractVersion', sortable: false, width: '300', },
                    { name: 'Contract Status', jsonmap: 'ContractStatus', sortable: false, width: '200', },
                    { name: 'Contract Date', jsonmap: 'ContractDate', sortable: false, width: '200', },

                    {
                        name: 'Select', sortable: false, width: '200',
                        formatter: function (cellvalue, options, rowObj) {
                            return '<input id="' + 'cnt' + rowObj.ContractID + '" value="View Lines" type="button">';
                        }
                    }

            ],

            caption: 'Contracts'

        });

Index.cshtml

<div style="text-align: center;">
    <div style="margin-top:30px; margin-bottom: 30px; display: inline-block;">
        <table id="tblSearch">
            <tr style="background-color:grey !important">
                <td>
                    <b>Search</b>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <label>Profile ID</label>
                        @Html.TextBox("Search", null, new { id = "txtProfileID", onkeypress = "return event.charCode >= 48 && event.charCode <= 57" })
                        <label class="red" style="margin-left:4px; float:right; font-weight:bold; font-size:12px;" id="valIndicator"></label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <input value="Search" type="button" id="btnSearch" style="float:right;" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>


<div style="text-align: center;"><div style="margin-bottom: 30px; display: inline-block;"><table id="tblAccounts"></table></div></div>
<div id="pgrAccounts"></div>
<div style="text-align: center;"><div style="margin-bottom: 30px; display: inline-block;"><table id="tblContracts"></table></div></div>
<div style="text-align: center;"><div style="margin-bottom: 30px; display: inline-block;"><table id="tblSupplies"></table></div></div>

The image below shows the jqGrid that should load when the button circled is clicked

I have checked the DOM after the 'Search' button is clicked again, everything seems identical to before the grids are reloaded, therefore cannot figure out why the 'Click' event would not be fired.

Answer 1

I'm unfamiliar with jqgrid, but I suspect that the element you are attaching the event to is being deleted and re-added. The event isn't firing because the original element you attached it to is no longer there.

Try changing the click event handler to the following:

$(document).on("click", "#tblAccounts tbody tr td input"

This will attach the click event at the document level rather than the tblAccounts level.