重新加载 jqGrid 后未触发“单击”事件

Question

我有一个带有搜索功能的表单，当搜索信息时会填充一个 jqGrid。 这个 jqGrid 包含动态创建的按钮，这些按钮在按下时会用数据填充另一个 jqGrid（与按钮所在的行相关）。

这一切都有效，当我返回搜索框并重新搜索一些不同的数据时会出现问题。 第一个 jqGrid 按预期加载，但是在单击嵌套按钮时，'Click' 事件现在不会触发，这反过来不会填充下一个 jqGrid。

索引.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>

下图显示了单击被圈出的按钮时应加载的 jqGrid

我在再次单击“搜索”按钮后检查了 DOM，一切似乎与重新加载网格之前相同，因此无法弄清楚为什么不会触发“单击”事件。

Answer 1

我不熟悉 jqgrid，但我怀疑您将事件附加到的元素正在被删除并重新添加。该事件未触发，因为您将其附加到的原始元素不再存在。

尝试将点击事件处理程序更改为以下内容：

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

这将在文档级别而不是 tblAccounts 级别附加点击事件。