jqGrid重新加載後'Click'事件沒有觸發

Question

我有一個帶搜索功能的表單，當搜索到信息時，jqGrid被填充。 這個jqGrid包含動態創建的按鈕，這些按鈕被按下時用數據填充另一個jqGrid（與包含該按鈕的行相關）。

這一切正常，當我返回到搜索框並重新搜索一些不同的數據時會出現問題。 第一個jqGrid加載與預期的一樣，但是，在單擊嵌套按鈕時，'Click'事件現在不會觸發，而不會填充下一個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> 

下面的圖像示出了應該加載盤旋按鈕被點擊時的jqGrid

我再次點擊「搜索」按鈕後檢查了DOM，在重新加載網格之前，一切看起來都是一樣的，因此無法弄清楚爲什麼'點擊'事件不會被解僱。

Answer 1

我不熟悉jqgrid，但我懷疑你正在附加事件的元素被刪除並重新添加。該事件不會觸發，因爲您附加的原始元素不再存在。

嘗試改變click事件處理程序如下：

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

這將在文檔級別而非tblAccounts級附加click事件。