asp.net MVC - 动态创建模态并设置事件监听器

Question

我有根据用户启动的搜索创建的引导模式。搜索返回一个嵌入在这个新模式中的 HTML 表格。最终，在用户单击行<tr> 时，我希望将行内容传递到使用 jquery 的表单中。然而，我的问题是我什至无法让点击事件注册到我分配类result-item 的<tr>。我假设这是因为该表是在解析脚本后动态创建的，但不确定如何补偿。

查看

<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

编辑 2：

好的，我们再上一层，把handler改成：

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

如果这不起作用，那么您的页面中存在不同的问题（可能是另一个 JS 错误）。

编辑： 不确定是 .table-item 还是 .result-item，在您说 .table-item 但实际行是 .result-item 的问题上，请相应更改。

由于表是动态创建的，您需要使用 jquery 中的 .on 方法而不是 .click，如下所示：

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

或

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

Jsfiddle：

https://jsfiddle.net/otax1L3y/