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

Question

当用户单击链接时，我使用简单模式来创建模式框。在这个模态框内是一个装有 jquery ui 选项卡的 div。但是，在打开模式之前，这些选项卡中的内容已更改。在我的 jsFiddle 示例中，它没有显示该部分。

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

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

标签不起作用。

当我尝试销毁实例并在每次调用函数以打开模式时重新创建时，我得到：

Chrome 开发工具报告 Uncaught TypeError: Cannot read property 'hash' of undefined 。

$(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/）

---

我尝试进行 REFRESH 调用，我认为需要更改内容，它不会报告任何错误，但也不会更改选项卡。

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

我的解决方案只有在您使用 Eric Martin 的 SimpleModal 时才有效。

我发现有一个名为 persist 的选项标签保留了 DOM 的元素。默认情况下，它设置为 false。将此设置为 true 将保持 DOM 元素完好无损。以下是 Eric 网站的内容：

坚持[布尔：假]

在模式调用中保留数据？仅用于现有的 DOM 元素。如果为 true，则数据将在模态调用之间保持不变，如果为 false，则数据将恢复到其原始状态。

示例代码：

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