只能加载一次对话框(在某些情况下)

时间:2017-03-07 18:06:24

标签: jquery asp.net-mvc

我有一个部分html文件,带有一个按钮,可以加载另一个模态对话框。模态对话框用于查找某些信息并将结果返回给调用的部分表单。按钮工作正常,搜索工作正常。当我将数据返回到部分表单并关闭搜索对话框时,该按钮不再起作用。再次选择按钮会使按钮执行回发,但它永远不会再次调用脚本。如果我取消对话框(使用取消按钮),它仍然有效。只有当我使用发布的返回数据更新表单时才会中断。

以下是模态

的脚本
 <script>
$(document).ready(function() {
    var $dialog = $("#AddUserForm")
    .dialog({
        autoOpen: false,
        position: { my: "center", at: "top+350", of: window },
        width: 1000,
        resizable: false,
        title: 'Select Corporation',
        modal: true,
        open: function () {
            $(this).load('@Url.Action("FindCorporation", "OutsideClient")');
        },
        buttons: {
            "Select": function () {
                GetCorporationDetails();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }

    });

$('#btnGetCorps').on('click', function (e) {
    e.preventDefault();
    $dialog.dialog('open');
});
});

以下是单击选择

时返回的内容
<script>
    function GetCorporationDetails() {
        $.ajax({
            url: '@Url.Action("GetNewDirectorshipDetails", "OutsideClient")',
            data: {
                entrynum: $("#corporationval2").val(),
                searchvalue: "",
                lawyerid: ""
            },
            dataType: "html",
            cache: false,
            type: "GET"
        }).done(function (data) {
            $("#newDetails").html(data); //HTML DOM replace *
        });
    };

脚本中的这一行似乎导致了所有问题

&#13;
&#13;
$("#newDetails").html(data); //HTML DOM replace *
&#13;
&#13;
&#13;

该行中的代码执行它应该执行的操作(填充字段)但在执行该按钮后不再起作用。不知怎的,它失去了与jquery的绑定。

据我所知,就我所研究的其他类似问题而言,这并不是在创建对话框后尝试创建对话框的情况。我只创建一次,按钮发出打开和关闭命令。此外,我可以随心所欲地打开和关闭它,并尽可能多地进行搜索。只有当我接受搜索结果并将结果发布回来时它才会中断。

具有调用模态的按钮的视图如下所示:

&#13;
&#13;
@model ODLData.NewOdl.Corporations.CorporationsViewModel
<div id="newDetails" class="panel panel-primary">
    <div class="panel-heading">
        <h1 class="panel-title">Coverage</h1>
    </div>
    <div class="panel-body">
        <div class="container">
            <div class="bottom-align col-md-2">
                Corporation Name:
            </div>
            <div class="col-md-6">
                @Html.TextBoxFor(x => x.CorporationEntity.CorporateName, new { @class = "form-control", @id = "corporationval" })
                @Html.HiddenFor(x => x.EntryNum)
            </div>
            <div class="col-md-3">
                <button id="btnGetCorps"
                        formnovalidate="formnovalidate"
                        class="btn btn-sm btn-primary">
                    <i class="glyphicon glyphicon-remove-circle"></i>
                    &nbsp;Add DirectorShip Modal
                </button>
            </div>
        </div>
                <div class="container">
                    <br />
                    <div class="form-inline">
                        <div class="bottom-align col-md-2">
                            Director Type:
                        </div>
                        <div class="bottom align col-md-4">
                            @Html.DropDownListFor(x => x.CorporationEntity.DirectorType, Model.DirectorTypeListItems, new {@class = "form-control directordropdown", @id = "status"})
                        </div>
                        <div class="bottom-align col-md-2">
                            Date lapsed:
                        </div>
                        <div class="bottom align col-md-4">
                            @Html.DropDownListFor(x => x.CorporationEntity.Incorporated, Model.IncorporatedListItems, new { @class = "form-control  directordropdown", @id = "status" })
                        </div>
                    </div>
                </div>
                <br />
                <div class="container">
                    <br />
                    <div class="form-inline">
                        <div class="bottom-align col-md-2">
                            Ownership:
                        </div>
                        <div class="bottom align col-md-4">
                            @Html.DropDownListFor(x => x.CorporationEntity.Ownership, Model.OwnershipListItems, new { @class = "form-control  directordropdown", @id = "status" })
                        </div>
                        <div class="bottom-align col-md-2">
                            Industry:
                        </div>
                        <div class="bottom align col-md-4">
                            @Html.DropDownListFor(x => x.CorporationEntity.Industry, Model.IndustryListItems, new { @class = "form-control  directordropdown", @id = "status" })
                        </div>
                    </div>
                </div>
                <br />
                <div class="container">
                    <br />
                    <div class="form-inline">
                        <div class="bottom-align col-md-2">
                            AssetSize:
                        </div>
                        <div class="bottom align col-md-4">
                            @Html.DropDownListFor(x => x.CorporationEntity.AssetSize, Model.AssetSizeListItems, new { @class = "form-control  directordropdown", @id = "status" })
                        </div>
                        <div class="bottom-align col-md-2">
                            Insured Limit:
                        </div>
                        <div class="bottom align col-md-4">
                            @Html.DropDownListFor(x => x.CorporationEntity.InsuredLimit, Model.InsuredLimitListItems, new { @class = "form-control  directordropdown", @id = "status" })
                        </div>
                    </div>
                </div>
                <br />
                <div class="container">
                    <br />
                    <div class="form-inline">
                        <div class="bottom-align col-md-2">
                            Profitabiity:
                        </div>
                        <div class="bottom align col-md-4">
                            @Html.DropDownListFor(x => x.CorporationEntity.Profitability, Model.ProfitabilityListItems, new { @class = "form-control  directordropdown", @id = "status" })
                        </div>
                    </div>
                    <div class="bottom-align col-md-2">
                        Comments:
                    </div>
                    <div class="bottom align col-md-4">
                        @Html.TextBoxFor(x => x.CorporationEntity.Comments, new { @class = "form-control  directordropdown", @id = "status" })
                        @*Html.EditorFor(model => model.DateLapsed, new { @class = "form-control", @id="datelapsed", htmlAttributes = new { type = "date" } }) *@
                    </div>
                </div>
                <br />
        <button id="btnTryAgain"
                class="btn btn-sm btn-primary">
            <i class="glyphicon glyphicon-remove-circle"></i>
            &nbsp;Add DirectorShip Modal
        </button>

        </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-sm-12">
                <button id="btnSaveDirector"
                        class="btn btn-sm btn-primary"
                        data-pdsa-action="savenew"
                        data-pdsa-val="update">                    >
                    <i class="glyphicon glyphicon-floppy-disk"></i>
                    &nbsp;Save
                </button>
                <button id="btnCancel"
                        formnovalidate="formnovalidate"
                        class="btn btn-sm btn-primary"
                        data-pdsa-action="cancel">
                    <i class="glyphicon glyphicon-remove-circle"></i>
                    &nbsp;Return
                </button>
                <button id="btnAddDirectorModa"
                        formnovalidate="formnovalidate"
                        class="btn btn-sm btn-primary"
                        data-pdsa-val=@Model.CorpID>
                    <i class="glyphicon glyphicon-remove-circle"></i>
                    &nbsp;Retrieve Details
                </button>
            </div>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

为了完整起见,我将包括解决方案。使用代表是我选择的方式。我用以下内容替换了点击:

$("#detailsPlace").on("click", '#btnGetCorps', function (e) { e.preventDefault(); $dialog.dialog('open'); });

归功于Jesen

1 个答案:

答案 0 :(得分:0)

点击处理程序绑定到btnGetCorps,但此元素已替换为$("#newDetails").html(data)

您需要将此按钮移出已替换的内容或使用代理。

$("#static-parent").on("click", "#btnGetCorps", function(e) { ... });