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 { 


} 

再次，它彷彿click事件永遠不會被註冊到錶行。

Answer 1

編輯2：

好吧，讓我們去上了一個臺階，更改處理程序是：

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

如果不工作，那麼有一個不同的問題，在您的網頁（另一JS錯誤可能）。

編輯： 不知道它是.table-item還是.result-item，對於你說的.table-item問題，但實際的行是.result-item，相應地改變。

由於是動態創建的表，你需要使用從jQuery的，而不是.click的.on方法，像這樣：

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

或

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

的jsfiddle：

https://jsfiddle.net/otax1L3y/