Jquery对话框 - 初始化后div消失

Question

Jquery对话框 - 初始化后div消失

5

JQuery对话框最近给我带来了很多痛苦。我有一个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>被删除了！我之前遇到过类似的问题，但是这里不能使用那个解决方案。在这个页面上，我可以有多个弹出式div。当我在打开它之前添加初始化时，表单弹出了。但是在关闭后，div被移除了，所以我不能再次看到弹出窗口。

- Zuber

你有没有查看Firebug控制台以查看是否有任何错误？ - Samuel

控制台上没有显示任何错误。 - Zuber

为什么不直接使用jQuery UI呢？ - ant

我正在使用JQuery UI，至少我认为是这样。.dialog()在JqueryUI框架中。 - Zuber

5个回答

3

好的，有你们的帮助，我想我已经掌握了它。

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

When a <div> is initialized as a dialog, it is removed from its original location and moved to the <body> element in a <div class="ui-dialog">. So it 'naturally' disappears.
To select the dialog, you now need a unique identifier. It can be the id in most cases, or some other attributes on that div which makes it unique on the page.

The dialog markup is created every time the dialog is initialized. So, in case of AJAX calls if an already existing dialog is initiated, you will get the popup more than once (as many times it was reinitialized). To solve this, I deleted the existing dialog markups before reintializing. I had to do this because my AJAX response may have some dialogs that need to be initiated.

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


});

}

- Zuber

3

在我的情况下，点击函数中简单的“return false;”就能解决问题。

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

- user88243

0

批准的答案对我也起作用了。我之前使用的是：

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

第一次点击后，它就不在那里了。

现在我直接使用ID：

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

显然，无论对话框在页面上移动到哪里，这个代码都能找到它。

- sigmapi13

0

你确定只有一个div的id是“confirmation”吗？重复的id是不允许的。

- kgiannakakis

JQuery Dialog只能使用ID吗？我们不能像这样做吗：$('div.popup').dialog({..})？目前为止，我确定页面只有一个“确认”框。 - Zuber

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sam Hasler · Accepted Answer

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