破坏后如何​​重新创建jquery对话框

问题描述

我正在页面加载（使用 $（document）.ready（function（）{）创建三个模态对话框，通过调用 setDialogWindows（）方法，并传递对话框的div对话框创建代码如下：

 code> function setDialogWindows（$ element）{
 $ element.dialog（{
 autoOpen：false，
 modal：true，
 show：'blind'，
 hide：'blind'，
 width：600，
 resizable：false，
按钮：{
取消：function（）{
 $（this）对话框（'destroy'）; 
}，
'保存'：function（）{
 $（this）.dialog（'close'）; 
} 
 } 
}）; 
} 
  

我将为您提供对话框html ，但是有一些jquery拖放功能，当用户单击取消时，我想要完全重置，因此 $（this）.dialog（'destroy'）。但是，当我再次单击该链接以打开该对话框时，它不会显示意识到这是因为我没有重新引用它，但我真的不能这样做，因为对话框是在页面加载时创建的。我尝试向Cancel函数添加递归调用，如下所示：

 取消：function（）{
 $ （本）.dialog（ '破坏'）; 
 setDialogWindows（$ element）; 
}，
  

但这不行 - 当我点击链接应该打开它。有没有办法只是重新创建对话框？任何关于我应该重新初始化对话框的想法，如果现在我唯一的地方是document.ready？

谢谢。

解决方案

您可以将setDialogWindows移动到点击处理程序中，并将autoOpen转为true，如：

<$ p $（$路径/到/可点击/元素）$（$）$（$）$（$）

这将在每次点击时初始化对话框，并在关闭时将其消灭。

您还可以打开单独的对话框，一个具有拖放功能，另一个没有它。

I'm creating three modal dialogs on page load (using $(document).ready(function() {). I create these dialogs by calling a setDialogWindows() method, and pass it the div for the dialog. Dialog creation code is below:

function setDialogWindows($element) {
 $element.dialog({
  autoOpen: false,
  modal: true,
  show: 'blind',
  hide: 'blind',
  width: 600,
  resizable: false,
  buttons: {
   Cancel: function() {
    $(this).dialog('destroy');
   },
   'Save': function() {
    $(this).dialog('close');
   }
  }
 });
}

I'll spare you the dialog html, but there is some jquery drag/drop functionality that I want to be completely reset when the user clicks Cancel. Hence the $(this).dialog('destroy'). However, when I click the link again to open the dialog box, it doesn't show up. I realize this is because I haven't re-inited it, but I really can't do that because the dialogs are created on page load. I tried adding a recursive call of sorts to the Cancel function as such:

   Cancel: function() {
    $(this).dialog('destroy');
    setDialogWindows($element);
   },

But that doesn't work -- still nothing opens when I click the link that should open it. Is there a way to just recreate the dialog box? Any ideas on where I should be re-initializing the dialog if the only place I do it now is on document.ready?

Thanks.

解决方案

You can move setDialogWindows into a click handler and turn autoOpen to true, something like:

$('path/to/clickable/elements').click(function(){
  setDialogWindows($element);
});

This will initialize the dialog on every click, and destroy it when it is closed.

You could also just open up separate dialogs, one with the drag and drop functionality, and another without it.

这篇关于破坏后如何​​重新创建jquery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！