asp.net MVC - 動的にモーダルを作成し、イベントリスナーを設定します

Question

私はユーザーが開始する検索に応じて作成されるブートストラップモーダルを持っています。検索によって、この新しいモーダルに埋め込まれたHTMLテーブルが返されます。最終的に、ユーザーが行<tr>をクリックすると、その行の内容がjqueryを使用してフォームに渡されるようにしたいと思います。しかし、私の問題は、私が<tr>に登録するためのクリックイベントを取得することができないということです。そのクラスのうちresult-itemを割り当てます。これは、スクリプトが解析された後にテーブルが動的に作成されますが、どのように補正するかはわかりません。

ビュー

<div id="IHS-Search-Results" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">IHS Search Results</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Select the well from the table bellow to populate form.</p> 
      <div id="results-table"></div> 
     </div> 
     <div class="modal-footer"> 
      <div class="form-group"> 
       <div class="col-md-offset-2 col-md-10"> 
        <input type="button" value="Close" data-dismiss="modal" class="btn btn-danger" /> 
       </div> 
      </div> 

     </div> 
    </div> 

</div> 

... //不要なコード

...

@section Scripts { 
<script> 

    $(document).ready(function() { 
     $('#submitModal').click(function() { 

      var data = { 
       'API14' : $('#API14').val() 
      } 

      console.log(data) 

      $.ajax({ 
       url: '/IHS_XREF/Search', 
       data: data, 
       success: function (data) { 
        $('#IHS-Search').modal('toggle'); 
        $('#results-table').html(data); 
        $('#IHS-Search-Results').modal('toggle'); 

       } 

      }); 


     }); 

     $('.result-item').click(function (e) { 

      console.log("click"); 

      var api = $(this).children('#API').val(); 
      var entityID = $(this).children('#EntityID').val() 
      var prodZone = $(this).children('#ProductionZone').val() 
      var lease = $(this).children('#LeaseName').val() 
      var wellNo = $(this).children('#WellNum').val() 

      $('#api14').val(api); 
      $('#entity').val(entityID); 
      $('#prod_zone_nm').val(prodZone); 
      $('#lease_name').val(lease); 
      $('#well_no').val(wellNo); 
      $('#ihs-search-results').modal('toggle'); 

     }); 
    }); 

</script> 
} 

コントローラが含まれていませんでした

[HttpGet] 
    public ActionResult Search(string API14) 
    { 
     IHSProductionSetXrefCreate ps = new IHSProductionSetXrefCreate(); 

     string[] idArray = new string[] {API14}; 

     byte[] export = diwh.Download(idArray); 

     using (MemoryStream ms = new MemoryStream(export)) 
     { 

      XmlSerializer serializer = new XmlSerializer(typeof(IHSProductionSetXrefCreate)); 
      try 
      { 
       IHSProductionSetXrefCreate result = (IHSProductionSetXrefCreate)serializer.Deserialize(ms); 
       ps = result; 
      } 
      catch (Exception e) 
      { 
       throw new Exception("Generic Exception - Issue with Serialization", e); 
      } 


     } 

     List<IHS_API_SearchResults> searchResults = new List<IHS_API_SearchResults>(); 
     foreach(var i in ps.ProducingEntity) 
     { 
      string API = i.WellBore[0].Identification.API; 
      string ENT = i.ProdMeta[0].EntityID; 
      string ZNE = i.Header[0].Zone.Zone_Name; 
      string LSE = i.Header[0].Designation.Designation_Name; 
      string WNO = i.WellBore[0].WellNum.WellNum; 

      searchResults.Add(new IHS_API_SearchResults {API14 = API, EntityID = ENT, ProductionZone = ZNE, LeaseName = LSE, WellNum = WNO}); 

     } 


     return PartialView(searchResults); 
    } 

部分図 - クリックイベントがテーブルの行に登録されることは決してありませんかのように戻され、再び

@model List<IHS_DATA_MANAGER.Models.IHS_API_SearchResults> <table class="table table-bordered table-striped table-hover" id="r-table"> <thead> <tr> <th class="text-nowrap"> @Html.DisplayNameFor(model => model[0].API14) </th> <th class="text-nowrap"> @Html.DisplayNameFor(model => model[0].EntityID) </th> <th class="text-nowrap"> @Html.DisplayNameFor(model => model[0].ProductionZone) </th> <th class="text-nowrap"> @Html.DisplayNameFor(model => model[0].LeaseName) </th> <th class="text-nowrap"> @Html.DisplayNameFor(model => model[0].WellNum) </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr class="result-item"> <td id="API">@item.API14</td> <td id="EntityID">@item.EntityID</td> <td id="ProductionZone">@item.ProductionZone</td> <td id="LeaseName">@item.LeaseName</td> <td id="WellNum">@item.WellNum</td> </tr> } </tbody> </table> @section Scripts { } 

コントローラからそれを表示します。

Answer 1

EDIT 2：

[OK]を、するハンドラを変更する、のは、より高いレベルで手放す：

$(document).on('click','.result-item',function(){ 
    alert(' clicked'); 
}) 

問題が解決しない場合は、あなたのページ内の別の問題がある（別おそらくJSエラー）。

EDIT： .table-itemまたは.result-itemの場合は、.table-itemと言っている質問で実際の行が.result-itemとなっているかどうかはわかりません。テーブルを動的に作成されたよう

あなたは、このように、代わりに.clickのjqueryのから.onメソッドを使用する必要があります。

$('.result-item').on('click',function(){ 
    alert(' clicked'); 
}) 

または

$('.table-item').on('click',function(){ 
    alert(' clicked'); 
}) 

Jsfiddle：

https://jsfiddle.net/otax1L3y/