JQuery UI всплывающее окно не работает более одного раза

Question

Я работаю над проектом MVC, где интенсивно используется jquery. В одном из представлений используется управление аккордеоном с несколькими (тремя) видами внутри. Всплывающее окно 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>

У меня есть кнопки из обоих образцов, и оба они делают одно и то же. Каждый совет будет с благодарностью. Заранее спасибо, Лазиале

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');

РЕДАКТИРОВАТЬ:

У вас все еще есть инициализация диалогапроисходит в вашей функции 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>