jqGridが再ロードされた後に 'クリック'イベントが発生しない

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に慣れていませんが、あなたがイベントをアタッチしている要素が削除され、再追加されている可能性があります。あなたがそれをアタッチした元の要素がもう存在しないため、イベントは発生しません。

を次のようにクリックイベントハンドラを変更してみてください：

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

これは、ドキュメントレベルではなく、tblAccountsレベルでクリックイベントを添付します。