删除对话框不会删除其内部内容

时间:2011-11-15 12:24:12

标签: javascript jquery jquery-ui

我在该对话框中创建了一个对话框和一个UI选项卡。在该选项卡中,我将一些内容显示为表格。当我通过remove()方法关闭对话框时它会关闭对话框但是当我重新打开它时,内容仍然显示在选项卡中,是否有任何方法在对话框关闭时内容也会重新显示。下面是我的代码。

this.formOrderList = null;
this.orderListDialogObject = $('<div id="mainDiv"></div>');
this.orderListTable = $('<div>'
        + '<table class="ui-widget" width="100%" border="0"  cellspacing="1" cellpadding="2">'
        + '<thead class="ui-widget-header" id="orderListHead">' + '<tr>'
        + '<th><strong> Order# </strong></th>'      
        + '<th><strong> Ref # </strong></th>' + '</tr>' + '</thead>'
        + '<tbody id="orderListBody">' + '</tbody>' + '</table>' + '</div>');
this.orderListTabs = $('<div>' + '<ul>'
        + '<li><a href="#pendingOrderList">Pending</a></li>' + '</ul>'
        + '<div id="pendingOrderList">' + '</div>' + '</div>');

this.show = function() {
    this.orderListDialogObject.dialog({
        title : 'Order List',
        width : 1000,
        height : 150,
        close : function(ev, ui) {              
    $(this).remove();               
            return false;
        }
    });
this.orderListTabs.tabs();
    this.orderListTabs.appendTo(this.orderListDialogObject);        
    $("#pendingOrderList", this.orderListTabs).append(this.orderListTable);

3 个答案:

答案 0 :(得分:0)

您需要拨打.dialog( "destroy" )来完全删除

答案 1 :(得分:0)

您只需创建一次div,然后重复使用这些相同的实例。您的remove来电只会从DOM树中移除该div(及其所有内容) - 您没有做任何可以清除div内容的内容。

您可能应该:

  1. 每次显示对话框时创建一组新的div - 即,重新运行上述所有代码每个时间以显示对话框,而不是一次性执行一次上前线。这样,你每次都以干净的名字开始。或者,
  2. 在开始向其中添加新内容之前,请先清除一个或多个div的内容,方法是调用empty()
  3. 在大多数情况下,选项#1可能更清洁,更容易维护。

答案 2 :(得分:0)

您需要在窗口上调用destroy(然后将内容放回原处),然后使用$(“#main”)删除内容。删除()。