引导选项卡在 jQuery-UI 对话框窗口中无法正常工作

Question

我正在尝试为我的应用程序创建一个类似于 UI 的 MDI。为此，我使用了 jQuery UI 库的dialog。

我有以下帮助函数来动态创建dialog 窗口：

function createDialog(title, content, options) {
    var defaults = {
        minWidth: 600,
        minHeight: 400,
        width: 600,
        height: 400,
        position: { my: "left top", at: "left top"}
    };
    return $("<div class='dialog' title='" + title + "'>" + content + "</div>")
        .dialog($.extend({}, defaults, options));
}

我使用上述函数通过我的 ajax 服务器的响应创建dialog，如下所示：

function showOrder(order_id)
{
    // Load order info
    $.getJSON('/full_orders/ajaxInfo/'+ order_id)
        .done(function(response) {
            if (!response.isError) {
                createDialog('Order Summary', response.data);
            } else {
                handleError(null, null, response.errorMessage);
            }
        })
        .fail(handleError);
}

因此，无论何时我的应用程序上有订单，我都希望能够在 dialog 窗口中显示摘要详细信息。 response.data 的内容来自我的 ajax 服务器，通常如下所示：

<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#fo_info" aria-controls="fo_info" role="tab" data-toggle="tab">Info</a></li>
        <li role="presentation"><a href="#fo_lines" aria-controls="fo_lines" role="tab" data-toggle="tab">Lines</a></li>
        <li role="presentation"><a href="#fo_customer" aria-controls="fo_customer" role="tab" data-toggle="tab">Customer</a></li>
        <li role="presentation"><a href="#fo_delivery_address" aria-controls="fo_delivery_address" role="tab" data-toggle="tab">Delivery Address</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="fo_info">
            <p>order info here</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="fo_lines">
            <p>order lines here</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="fo_customer">
            <p>customer info here</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="fo_delivery_address">
            <p>delivery address</p>
        </div>
    </div>

</div>

当整个事情运行时，我可以点击一个订单，它会触发 showOrder() 函数，它会动态创建一个对话窗口并从 ajax 服务器加载内容，其中包含引导程序 tabs 并且我能够在所有选项卡之间切换。

如果我关闭对话框并再次单击链接，选项卡将停止工作。我不再能够在选项卡之间切换。如果我刷新页面并再次单击订单，它会起作用。所以，它似乎只工作一次。

知道这是为什么吗？

Answer 1

好的，我已经弄清楚为什么会出现这个问题了。

当您关闭对话框时，它只是用“display: none”隐藏对话框。每次我打开一个对话框时，DOM 元素都会保留在页面上并堆积起来。

解决这个问题的方法是通过close 事件处理程序销毁/删除对话框。

所以，我已经像这样更新了我的createDialog 函数，它解决了我的问题：

function createDialog(title, content, options) {
    var defaults = {
        minWidth: 600,
        minHeight: 400,
        width: 600,
        height: 400,
        position: { my: 'left top', at: 'left top' },
        close: function()
        {
            $(this).dialog('destroy').remove();
        }
    };
    return $("<div class='dialog' title='" + title + "'>" + content + "</div>")
        .dialog($.extend({}, defaults, options));
}