有问题的代码:
$('#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中,而不是相反。是否需要添加/删除才能使其正常工作?
答案 0 :(得分:1)
这是问题所在:
appendTo: "#msg-dialog",
这里的一点是,#msg-dialog
在 #dialogContainer
内,您在后一个div上创建一个对话框并附加到前者是后者的孩子。
快速浏览API文档将澄清一些事情:
appendTo
类型:选择器默认值:" body"对话框(和叠加层, if modal)应该附加到。
来源:jqueryUI
解决方案是从msg-dialog
中取出dialogContainer
div - 请参阅UPDATED FIDDLE HERE