我有一个部分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 *
});
};
脚本中的这一行似乎导致了所有问题
$("#newDetails").html(data); //HTML DOM replace *
&#13;
该行中的代码执行它应该执行的操作(填充字段)但在执行该按钮后不再起作用。不知怎的,它失去了与jquery的绑定。
据我所知,就我所研究的其他类似问题而言,这并不是在创建对话框后尝试创建对话框的情况。我只创建一次,按钮发出打开和关闭命令。此外,我可以随心所欲地打开和关闭它,并尽可能多地进行搜索。只有当我接受搜索结果并将结果发布回来时它才会中断。
具有调用模态的按钮的视图如下所示:
@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>
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>
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>
Save
</button>
<button id="btnCancel"
formnovalidate="formnovalidate"
class="btn btn-sm btn-primary"
data-pdsa-action="cancel">
<i class="glyphicon glyphicon-remove-circle"></i>
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>
Retrieve Details
</button>
</div>
</div>
</div>
</div>
&#13;
为了完整起见,我将包括解决方案。使用代表是我选择的方式。我用以下内容替换了点击:
$("#detailsPlace").on("click", '#btnGetCorps', function (e) { e.preventDefault(); $dialog.dialog('open'); });
归功于Jesen
答案 0 :(得分:0)
点击处理程序绑定到btnGetCorps
,但此元素已替换为$("#newDetails").html(data)
。
您需要将此按钮移出已替换的内容或使用代理。
$("#static-parent").on("click", "#btnGetCorps", function(e) { ... });