2017-03-07 11 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へのバインディングを失います。

私が調査した他の類似の問題につきましては、これは既に作成されていればダイアログを作成しようとするケースではありません。私は一度だけ作成し、ボタンはOpenとCloseコマンドを発行します。また、私は好きなだけ頻繁に開閉することができ、好きなだけ多くの検索を行うことができます。検索結果を受け入れて、結果が返ってきたときだけ壊れてしまいます。

モーダルを呼び出すボタンがあるビューは次のようになります。

完全を期すために

@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>

、私は解決策が含まれます。デリゲートを使うことは私が選ぶ方法でした。私もしてクリックを置き換え:Jesen

+0

部分ビューはどのように見えますか? – Jasen

答えて

0

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

クレジットクリックハンドラがbtnGetCorpsにバインドされているが、この要素は$("#newDetails").html(data)に置き換えられます。

置き換えられたコンテンツからこのボタンを移動するか、デリゲートを使用する必要があります。

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

それはそれのように見えます。私はあなたに投票しますが、私はあまりにも新しく、彼らは私を許さないでしょう。ありがとう、私はそれを得たことはないだろう、私は思っていません。 – Dan

+0

デリゲートの使用は私が選択する方法でした。部分ビューを含むdivのIDを使用します – Dan

関連する問題