Question

我已经尝试了所有可能的想法来摆脱这个问题，我知道它是一个已知的问题，但是我如何克服它，基本上jQuery ui在调用两次时没有显示对话框，使用

self.$popup.dialog("open");

我正在使用jQuery Ui 1.8.9和jQuery 1.4.4

这是我的代码：

   self.$popup = $("#import_box_dialog").dialog({
        autoOpen: false,
        title: 'Import Albums',
        modal: true,
        position: "top",
        height: 600,
        maxWidth: 800 ,
        minWidth: 400 ,
        show:"slide",
        width :700,
        "buttons": [
            {
                text: "Import",
                click: self.doImport
            }
        ]
    });

我看到的另一个奇怪的事情是对话框内容嵌入在外部DOM元素中。

我的对话框DOM结构如下：import_box-＆gt;

<div class="media_import_box" >
    <div id="import_box_dialog">
        <ul id="media_content"></ul>
    </div>
</div>

当第二次显示时，DOM树看起来像这样

Bug DOM Tree

“import_box_dialog”实际上移出“import_box”div并且我不知道它是如何发生的，但是display属性是none，当我再次调用对话框时它不会改变。

Answer 1

$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });

    $('#opener').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });
});

Basic usage of the jQuery UI dialog

Answer 2

管理解决问题，问题是程序在调用$("import_box_dialog").dialog()时反复创建不必要的div。并且由于$运算符返回u所有div匹配给定条件，即在这种情况下的ID，因此内容没有变得可见，我认为这让它感到困惑，有两种方法可以解决它：

通过调用$("import_box_dialog").child().remove()手动删除Div这将删除对话框div中的所有其他Div
使用变量跟踪用于对话框的div，因为我使用的是jquery类，我将它用于静态变量。这样，它就跟踪对话框，并始终在同一个div上创建对话框。

我认为jquery应用了很多类样式，因为在选择正确的div时存在歧义，我想使用静态变量来解决它。

Jquery Dialog第二次不显示内容

2 个答案: