jQueryUI 弹出窗口无法多次工作

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>

我有两个示例中的按钮，它们都在做同样的事情。

更新

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