Question

有问题的代码：

$('#infoTable').click(infoModal);

function infoModal(){
    var table = "THIS IS A TABLE";
    $("#dialogContainer").dialog({
        appendTo: "#msg-dialog",
        autoOpen: false,
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
            close: { text: 'Close', click: function(){
                    $(this).dialog("close");
                    console.log("Thanks for using this!");
                }
            }
        }
    });
    //Append table variable to dialog box
    $('#msg-dialog').after(table);
}

我是使用jQueryUI对话框功能的新手，我认为我的方法在这里是错误的。我只是想让对话框显示出来，但我得到的只是Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent错误。据我所知，子div元素（#msg-dialog）包含在#dialogContainer div中，而不是相反。是否需要添加/删除才能使其正常工作？

Answer 1

这是问题所在：

appendTo: "#msg-dialog",

这里的一点是，#msg-dialog 在 #dialogContainer内，您在后一个div上创建一个对话框并附加到前者是后者的孩子。

快速浏览API文档将澄清一些事情：

appendTo

类型：选择器默认值：＆＃34; body＆＃34;对话框（和叠加层，   if modal）应该附加到。

来源：jqueryUI

解决方案是从msg-dialog中取出dialogContainer div - 请参阅UPDATED FIDDLE HERE

jQuery模式没有出现，得到＆＃34;未捕获的DOMException：无法执行＆＃39; appendChild＆＃39; on＆＃39; Node＆＃39 ;:新的子元素包含父元素＆＃34;

1 个答案: