jquery ui popupが一度は機能しません

Question

jveryが多用されているmvcプロジェクトに取り組んでいます。ビューの1つに、複数の（3つの）ビューを持つアコーディオン制御があります。 jqueryポップアップは最初のパネルでうまく動作しますが、一度そのパネルを閉じるとポップアップは再び動作しません。 http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/とhttp://jsfiddle.net/DSNt5をガイドとして使用しましたが、何ができるか分かりません。 下記のコードをご覧ください。 マークアップ：

<div> 
     @Html.Hidden("Id", Model.Report.Id) 
     <div id="accordion"> 

      @foreach (var item in Model.Parameters) 
      { 
       <h3><a href="#">@Html.LabelFor(m => item.Name, item.Prompt)</a></h3> 
       <div> 
        <div class="editor-label"> 
         Search @*Html.TextBox("Search")*@ 
         <input id="@("Search" + item.Name)" type="text" name="q" data-autocomplete="@Url.Action("QuickSearch/" + item.Name, "Report")" /> 
        </div> 

        <div class="editor-field"> 
         <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>       
        </div> 

        <div class="removed" style="clear:both; float:left; margin-left:440px;"> 
        <a href="#" class="remove">Remove selection</a> 
        <button id="opener">Open Dialog</button> 
        <h2 class="demoHeaders">Dialog</h2> 
     <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p> 
        </div>    
       </div> 
      }   
     </div> 
     <p style="text-align: right"> 
      <input type="submit" value="Generate Report" /> 
     </p> 
    </div> 

JS：

<script type="text/javascript"> 
     $(document).ready(function() { 
      var $dialog = $('<div></div>') 
       .html('This dialog will show every time!') 
       .dialog({ 
        autoOpen: false, 
        title: 'Basic Dialog' 
       }); 

      $('#opener').click(function() { 
       $dialog.dialog('open'); 
       // prevent the default action, e.g., following a link 
       return false; 
      }); 
     }); 
      </script> 


<script type="text/javascript"> 
$(function() { 
    $("#dialog2").dialog({ 
     autoOpen: false, 
     show: "blind", 
     hide: "explode" 
    }); 
    $('#opener').click(openDialog); 

}) 

var openDialog = function(){ 


    $('#dialog2').dialog('option', 'buttons',{ 
     "Cancel":function(){ 
     $('#dialog2').dialog('close'); 
     } 
    }); 


$('#dialog2').dialog('open'); 
</script> 

私はそこに両方の​​試料からのボタンがあり、両者は同じことをやっています。 すべてのアドバイスをいただければ幸いです。事前に おかげで、Laziale

UPDATE：

<script type="text/javascript"> 
    $(document).ready(function() { 

     { 
      $("#dialog2").dialog({ 
       autoOpen: false, 
       show: "blind", 
       hide: "explode" 
      }); 
      $('#opener').click(openDialog); 

     } 
    }); 
     </script> 

<script type="text/javascript"> 

var openDialog = function(){ 

$('#dialog2').dialog('open'); 

    $('#dialog2').dialog('option', 'buttons',{ 
     "Cancel":function(){ 
     $('#dialog2').dialog('close'); 
     } 
    }); 


$('#dialog2').dialog('open'); 
</script> 

Answer 1

は、あなただけのあなたのダイアログ度を初期化する必要があります。クリックするたびに再初期化されます。

はちょうど呼び出し、文書準備して、あなたのクリックハンドラ内でそれを初期化し

$('#dialog2').dialog('open'); 

EDIT：

あなたはまだあなたのopenDialogの機能で何が起こっダイアログの初期化を持っています。試してみてください：

<script type="text/javascript"> 
$(document).ready(function() { 

    { 
     $("#dialog2").dialog({ 
      autoOpen: false, 
      show: "blind", 
      hide: "explode", 
      buttons: {"Cancel": function(){ 
       $('#dialog2').dialog('close'); 
      } 
     }); 

     $('#opener').click(function(){ 
      $('#dialog2').dialog('open'); 
     }); 

    } 
}); 
</script>