2017-03-07 69 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