jQuery模式没有出现,得到"未捕获的DOMException:无法执行' appendChild' on' Node&#39 ;:新的子元素包含父元素"

时间:2017-08-01 16:14:55

标签: javascript jquery html css jquery-ui

JS Fiddle here.

有问题的代码:

$('#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中,而不是相反。是否需要添加/删除才能使其正常工作?

1 个答案:

答案 0 :(得分:1)

这是问题所在:

appendTo: "#msg-dialog",

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

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

  

appendTo

     

类型:选择器默认值:" body"对话框(和叠加层,   if modal)应该附加到。

     

来源:jqueryUI

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