Jquery 对话框关闭按钮不关闭；对话框只打开一次答案

【问题标题】：Jquery dialog close button does not close; Dialog opens only onceJquery 对话框关闭按钮不关闭；对话框只打开一次
【发布时间】：2012-07-18 22:57:56
【问题描述】：

这个问题似乎很常见，在研究和尝试了所有对其他人有用的建议解决方案后，对我却不起作用。另外，firebug 也没有显示任何错误。

我正在使用 Jquery 模式对话框。该对话框将通过网格列上的链接打开。问题是它只打开一次，关闭按钮没有关闭对话框，但是我可以用右上角的 (X) 关闭它。但是，在尝试为不同的列值重新打开对话框时，该对话框未打开（尽管执行了服务器端操作类）.. 请帮助。

相关代码：父页面 (jsp)

 <s:url id="testurl" action="openView"/>
 <script type="text/javascript">
 $(function(){
  $("#dialogOne").dialog({
      autoOpen: false,
      title: 'Details',
      modal:true,
      width:970,
      buttons: { "Close": function() { $(this).dialog("close"); } },
      open: function(event, ui) { $(".ui-dialog-titlebar-close").show(); }
      });

});

 function formatLink(cellvalue, options, rowObject) {
                                    return "<a href='#' onClick='javascript:openDialog("+cellvalue+");return false;'>" + cellvalue + "</a>";
                                    }
                                function openDialog(number) {
                                    $("#dialogOne").load("<s:property value="testurl"/>?Number="+number);
                                    $("#dialogOne").dialog('open');
                                }

相关网格列：

 <sjg:gridColumn 
                                            name="number" 
                                            index="nsNumber" 
                                            title="View Action" 
                                            formatter="formatLink" 
                                            sortable="false" 
                                            width="80"

                                    />

我已经尝试了 ajax 解决方案，并记录了准备好的建议变体，但它不起作用。操作 openView 返回一个 jsp，我确保该页面上的 div id 都是唯一的，如果这有什么不同的话。 Firebug 没有显示任何错误。对话框只打开一次，不能通过对话框关闭按钮关闭。而且，之后无法打开（/重新打开）对话框。

谢谢，

【问题讨论】：

标签： jquery struts2 modal-dialog jquery-ui-dialog

【解决方案1】：

我认为这是您的脚本配置的问题。事件处理程序未正确初始化，因此事件未按预期执行。

通常，您会希望在页面加载时对其进行初始化，而我在将处理程序包装在 $(document).ready() 函数中方面取得了最大的成功。除此之外，您使用的 onClick 方法也值得怀疑。如果您使用 jQuery，最好避免将 onClick 分配给标签本身。通过使用 jQuery 及其绑定机制，您可以避免动态页面元素在事件处理程序方面无法按预期运行的问题。

 function formatLink(cellvalue, options, rowObject) {
          return "<a href='#' class='dialogLink' data-cell='cellvalue'>" + cellvalue + "</a>";
      }

 $(document).ready(Function(){

       $("#dialogOne").dialog({
            autoOpen: false,
            title: 'Details',
            modal:true,
            width:970,
            buttons: { "Close": function() { $(this).dialog("close"); } },
            open: function(event, ui) { $(".ui-dialog-titlebar-close").show(); }
       });

       // This will bind the event handler to any link with this class. The data 
       // attribute is used to set/get the cellvalue from the link that is clicked.
       $('.dialogLink').on('click', function(){
            var number = $(this).data('cell');
            $("#dialogOne").load("<s:property value="testurl"/>?Number="+number);
            $("#dialogOne").dialog('open');
        });

  });

【讨论】：