2017-03-07 82 views
0

我有一個部分的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> 
 
        &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" 
 
         [email protected]> 
 
        <i class="glyphicon glyphicon-remove-circle"></i> 
 
        &nbsp;Retrieve Details 
 
       </button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

爲了完整起見,我將包括解決方案。使用委託是我選擇去的方式。我更換了點擊即使有:

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

感謝詹森

+0

局部視圖是什麼樣的? – Jasen

回答

0

單擊處理勢必btnGetCorps但該元素是與$("#newDetails").html(data)取代。

您需要將此按鈕移出替換的內容或使用委託。

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

看起來像它。我會投你一票,但我太新了,他們不會讓我。謝謝,我永遠不會那樣做,我不認爲。 – Dan

+0

使用委託是我選擇去的方式。我使用包含部分視圖的div的id – Dan

相關問題