jQuery对话框 - 初始化后DIV消失

StackOverflow https://stackoverflow.com/questions/2272961

题

最近，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>

这是...

$(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被删除了。因此，我再也看不到弹出窗口了。

有帮助吗？

解决方案 2

好的。我想我在你们的帮助下钉了它。

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

  1. 当一个 <div> 被初始化为对话框，将其从原始位置删除，然后移动到 <body> a <div class="ui-dialog">. 。所以 '自然' 消失。

  2. 要选择对话框，您现在需要一个唯一的标识符。可以是 ID 在大多数情况下，或该div上的其他一些属性使其在页面上具有独特性。

  3. 每次对话框初始化时，都会创建对话框标记。因此，如果启动了已经存在的对话框，则如果呼叫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
    });


});

    }

其他提示

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

就我而言，一个简单的“返回false;”在点击函数中，有一个技巧：

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

您确定只有一个和只有一个DIV具有“确认”？不允许重复的ID。

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

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

单击第一次后不存在。

现在，我正在使用ID：

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

显然，无论对话在何处将其移动在页面上，都会找到它。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top