Bootstrap选项卡在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()函数，并动态创建一个对话框窗口并从包含引导程序tabs ajax服务器中加载内容，并且可以在所有选项卡之间切换。

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

知道为什么会这样吗？

Answer 1

好的，我已经弄清楚了为什么发生此问题。

当关闭对话框时，它只是用“显示：无”来隐藏对话框。 每次打开对话框时，DOM元素都保留在页面上并不断堆积。

解决此问题的方法是通过on 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));
}