Jquery Dialog - 初始化后div消失答案

【问题标题】：Jquery Dialog - div disappears after initializationJquery Dialog - 初始化后div消失
【发布时间】：2011-01-17 09:28:29
【问题描述】：

JQuery Dialog 最近让我很痛苦。我有以下要弹出的 div。（忽略类在语法中不显示双引号）

TABLE class=widget-title-table border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
    <TD class=widget-title><SPAN class=widget-title>Basic Info</SPAN></TD>
    <TD class=widget-action>
    <DIV id=edit-actions jQuery1266325647362="3">
        <UL class="linkbutton-menu read-mode">
            <LI class="control-actions">
                <A id="action-button" class="mouse-over-pointer linkbutton">Delete this                 stakeholder</A> 
            <DIV id="confirmation" class="confirmation-dialog title=Confirmation">
                Are you sure you want to delete this stakeholder? 
            </DIV>

</LI></UL></DIV></TD></TR></TBODY></TABLE>

用于此的 JQuery 是 ...

$(document).ready(function() {

$('#confirmation').dialog({
    bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
    draggable: true, position: 'center', resizable: false, width: 400, height: 150
    });

});

对话框是由

“打开”的

var confirmationBox = $('#confirmation',actionContent);
if (confirmationBox.length > 0) {


    //Confirmation Needed
    $(confirmationBox).dialog('option', 'buttons', {
        'No': function() {
            $(this).dialog('close');
        },
        'Yes': function() {
            $('ul.read-mode').hide();
            $.post(requestUrl, {}, ActionCallback(context[0], renderFormUrl), 'json');
            $(this).dialog('close');
        }            
    });

    $(confirmationBox).dialog('open');

}

问题始于初始化本身。当文档加载时，<div #confirmation> 将从标记中删除！我之前遇到过类似的问题，但我不能在这里使用该解决方案。在这个页面上，我可以有多个 PopUp div。

当我在打开它之前添加初始化时；表格弹出。但是在我关闭它之后， div 被删除了；所以我再也看不到弹出窗口了。

【问题讨论】：

你有没有在firebug中查看控制台是否有错误？
控制台上没有显示错误
你为什么不用jquery ui
我正在使用 JQuery UI；至少我是这么认为的。 .dialog() 在 JqueryUI 框架中。

标签： jquery modal-dialog jquery-ui-dialog

【解决方案1】：

您看到它删除#confirmation 的原因是$("#foo").dialog() 会将#foo 从它在DOM 中的任何位置移动到文档底部的包装元素内，这些元素创建最初隐藏的对话框样式。据了解，对话框在打开之前是隐藏的。

【讨论】：

谢谢。我才意识到这一点。我认为问题在于我在“actionContext”中再次搜索 div。但是 Jquery 现在已经将该 div 移到了范围之外。那么，ID 是打开对话框的唯一方法吗？

【解决方案2】：

好的。我想我已经在你们的帮助下成功了。

我现在知道的关于对话的一些“自定义”事实（如果我错了，请纠正）：

当<div> 被初始化为对话框时，它会从原来的位置移除并移动到<div class="ui-dialog"> 中的<body> 元素。所以它“自然地”消失了。
要选择对话框，您现在需要一个唯一标识符。在大多数情况下，它可以是 id，也可以是该 div 上的一些其他属性，使其在页面上独一无二。

每次初始化对话框时都会创建对话框标记。因此，在 AJAX 调用的情况下，如果启动了一个已经存在的对话框，您将多次收到弹出窗口（与重新初始化一样多次）。为了解决这个问题，我在重新初始化之前删除了现有的对话框标记。我必须这样做，因为我的 AJAX 响应可能有一些需要启动的对话框。

function InitializeConfirmationDialog() {
    $('div.confirmation-dialog').each(function() {
    var id = $(this).attr("id");
    if ($('div.ui-dialog-content[id="' + id + '"]').length > 0) {
        $('div.ui-dialog-content[id="' + id + '"]').parents('div.ui-dialog:first').html("").remove();                
    }
    $(this).dialog({
        bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
        draggable: true, position: 'center', resizable: false, width: 400, height: 150
    });


});

}

【讨论】：

【解决方案3】：

在我的例子中，一个简单的'return false;'在点击功能中做到了：

  $("#buttonIdThatOpensTheDialogWhenClicked")
         .button()
         .click(function () {
                $("#myDialog").dialog("open");
                return false;
         });
  });

【讨论】：

【解决方案4】：

您确定只有一个 div 的 id 为“confirmation”吗？不允许使用重复的 ID。

【讨论】：

JQuery 对话框是否只对 ID 有效？我们不能做类似 $('div.popup').dialog({..}) 的事情吗？截至目前，我确信该页面只有一个“确认”

【解决方案5】：

批准的答案也对我有用。我正在使用：

$('.myLink').click(function(){
    $(this).next().dialog(...)
});

第一次点击后就不存在了。

现在我直接使用 ID：

$("#myId").dialog(...)

很明显，无论对话框在页面上的哪个位置移动它，它都会找到它。

【讨论】：