Question

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

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

dialog

我通过我的ajax服务器的响应使用上面的函数创建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)); }，如下所示：

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的内容来自我的ajax服务器，通常如下所示：

response.data

当整个事情运行时，我可以点击一个命令，它触发<div>  <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>  <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>函数并动态创建一个对话窗口并从ajax服务器加载内容，该服务器包含bootstrap showOrder()和我可以在所有标签之间切换。

如果我要关闭对话框并再次单击该链接，则标签将停止工作。我无法再在标签之间切换。如果我刷新页面并再次单击订单，则可以正常工作。所以，它似乎只工作一次。

知道为什么会这样吗？

Answer 1

好的，我已经弄明白为什么会出现这个问题。

当你关闭对话框时，它只是用“display：none”隐藏对话框。每次打开对话框时，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));
}

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

1 个答案: