jquery ui 对话框只打开一次答案

【问题标题】：jquery ui dialog opens only oncejquery ui 对话框只打开一次
【发布时间】：2010-12-14 16:31:52
【问题描述】：

我有一个按钮，点击后会打开一个对话框。对话框显示一个隐藏的 div

单击 X 图标关闭对话框后，该对话框无法再次打开。

【问题讨论】：

邮政编码或链接... :-(
你用什么代码来隐藏和显示对话框？
一些代码会很棒。通常，不要忘记确保在关闭时/关闭时不会导致任何错误。

标签： javascript jquery html css jquery-ui

【解决方案1】：

你在使用 ui 对话框吗？您应该发布一些代码，以便我们查看导致您的问题的原因。但这是一个猜测（因为我最近犯了同样的错误）。使用 ui 对话框时，您只需初始化对话框一次。

 $(document).ready(function() {
   $('#dialog').dialog({
     autoOpen:false,
     modal:'true',
     width:450,
     height:550
  });
 $('#MyButton').click(openDialog);    

});

此代码初始化对话框但不显示它。当单击 MyButton 时，openDialog 函数将打开对话框。

   var openDialog = function(){

       $('#dialog').load('loadurl.php');//load with AJAX

      //optionally change options each time it is clicked
       $('#dialog').dialog('option', 'buttons',{
          "Cancel":function(){
             $('#dialog').dialog('close');
          }
      });

     //actually open the dialog
     $('#dialog').dialog('open');

};

【讨论】：

【解决方案2】：

Scott Gonzalez（jQuery UI 团队的成员）在最近的一篇博文中谈到了很多人在开始使用 jQuery UI 时遇到此问题的原因：http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

摘录：

用户经常遇到的问题与对话框是他们试图每次都实例化一个新对话框用户执行一些操作（通常单击链接或按钮）。这是一个可以理解的错误，因为乍一看似乎在调用 .dialog() 元素是导致对话框的原因打开。实际上正在发生的事情是一个新的对话实例正在创建，然后该实例是之后立即打开实例化。原因是对话框打开是因为对话框有一个 autoOpen 选项，默认为真的。所以当用户调用 .dialog() 在一个元素上两次，第二次调用被忽略，因为对话框有已经被实例化了元素。

解决方案：

解决这个问题的简单方法是实例化对话框 autoOpen 设置为 false 然后调用 .dialog('open') 在事件处理程序中。

$(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');
    });
});

【讨论】：

如果对话框被初始化并显示在事件中会发生什么？是否存在性能风险或只是不好的做法？
不起作用，也许只是这个对话框的设计不好？

【解决方案3】：

作为已接受答案的补充，我想补充一点，在 asp.net 更新面板中使用它时需要注意。如果您单击该按钮，则会发生回发，弹出窗口将打开但不会再次打开，因为发生了回发。因此，您应该确保用于打开弹出窗口的按钮不会回发。即：

<asp:LinkButton ID="btn1" runat="server" OnClientClick="return false;">Click me</asp:LinkButton>

【讨论】：