隐藏和重新显示后Jquery UI选项卡失败

Question

我使用Simple Modal在用户单击链接时创建模式框。在这个模式框里面有一个使用jquery UI标签的div。但是，在打开模式之前，这些选项卡中的内容会发生更改。在我的jsFiddle示例中，它不显示该部分。

问题 通过第一次单击链接打开模式，模式框显示和标签正常工作。

关闭模式并重新打开。 （用户可以点击相同的链接）。

标签不起作用。

当我试图摧毁实例，每个函数被调用来打开模态时重建，我得到：

Chrome开发工具报告遗漏的类型错误：无法读取的未定义的属性“散”。

$(document).ready(function() { 
    $('#tabs').tabs(); 
}); 

function getDetails(atag) { 
    $('#hotelDetails').modal({ 
       minHeight: 100, 
       onOpen: function (dialog) { 
        dialog.overlay.fadeIn('fast', function() { 
         dialog.container.slideDown('fast', function() { 
          dialog.data.fadeIn('fast'); 
          $('#tabs').tabs(); 
          $("#tabs").tabs("option", "active", $("#" + atag).index()-1); 
         }); 
        }); 
       }, 
       onClose: function(dialog) { 
        dialog.data.fadeOut('fast', function() { 
         dialog.container.slideUp('fast', function() { 
          dialog.overlay.fadeOut('fast', function() { 
           $.modal.close(); // must call this! 
           $('#tabs').tabs("destroy"); 
          }); 
         }); 
        }); 
       }, 
       zIndex: 3000 
      }); 
} 

（见例如http://jsfiddle.net/R44Yh/1/）

---

我试着做了一次刷新调用我认为这是需要改变的内容，并没有报告任何错误，但不改变标签。

$(document).ready(function() { 
    $('#tabs').tabs(); 
}); 

function getDetails(atag) { 
    $('#hotelDetails').modal({ 
       minHeight: 100, 
       onOpen: function (dialog) { 
        dialog.overlay.fadeIn('fast', function() { 
         dialog.container.slideDown('fast', function() { 
          dialog.data.fadeIn('fast'); 
          $('#tabs').tabs("refresh"); 
          $("#tabs").tabs("option", "active", $("#" + atag).index()-1); 
         }); 
        }); 
       }, 
       onClose: function(dialog) { 
        dialog.data.fadeOut('fast', function() { 
         dialog.container.slideUp('fast', function() { 
          dialog.overlay.fadeOut('fast', function() { 
           $.modal.close(); // must call this! 
          }); 
         }); 
        }); 
       }, 
       zIndex: 3000 
      }); 
} 

（见例如http://jsfiddle.net/QYmxH/2/）

Answer 1

我的解决方案仅适用，如果你使用的是埃里克·马丁的SimpleModal。

我发现有一个选项标记叫做坚持，它保留了DOM的元素。默认情况下，它被设置为false。将其设置为true将保持DOM元素不变。下面是Eric的网站说：

persist [Boolean:false]

Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state.

示例代码：

$('#hotelDetails').modal({ 
       persist: true, 
       modal: false, 
       onOpen: function (dialog) { 
        dialog.overlay.fadeIn('fast', function() { 
         dialog.container.slideDown('fast', function() { 
          dialog.data.fadeIn('fast'); 
          $('#tabs').tabs(); 
          $("#tabs").tabs("option", "active", $("#" + atag).index()); 
         }); 
        }); 
       }, 
       onClose: function(dialog) { 
        dialog.data.fadeOut('fast', function() { 
         dialog.container.slideUp('fast', function() { 
          dialog.overlay.fadeOut('fast', function() { 
           $.modal.close(); // must call this! 
           $('#tabs').tabs("destroy"); 
          }); 
         }); 
        }); 
       }, 
       zIndex: 3000 
      });