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/