我有一個部分的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 *
在該行的代碼做什麼是應該做的(填充字段),但它執行後的按鈕,不再工作。不知何故,它失去了對jQuery的綁定。
Bty,就我所知道的,對於我研究過的其他類似問題,這不是嘗試在創建對話框後創建對話框的情況。我只創建一次,並且按鈕發出打開和關閉命令。另外,我可以隨時打開和關閉它,並根據需要執行儘可能多的搜索。只有當我接受搜索結果並將結果公佈後,它纔會中斷。
有它調用模式的按鈕查看如下所示:
@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"
[email protected]>
<i class="glyphicon glyphicon-remove-circle"></i>
Retrieve Details
</button>
</div>
</div>
</div>
</div>
爲了完整起見,我將包括解決方案。使用委託是我選擇去的方式。我更換了點擊即使有:
$("#detailsPlace").on("click", '#btnGetCorps', function (e) { e.preventDefault(); $dialog.dialog('open'); });
感謝詹森
局部視圖是什麼樣的? – Jasen