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));
}