javascript - jQuery 模式未出现，在 "Uncaught DOMException: Failed to execute ' : The new child element contains the parent"上获取 'Node' appendChild'

Question

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 中，而不是相反。是否需要添加/删除某些内容才能使其正常工作？

Answer 1

问题是:

appendTo: "#msg-dialog",

这里的要点是#msg-dialog 是 inside #dialogContainer，你创建一个对话框在后一个 div 上附加到前者，前者是后者的子元素。

快速浏览一下 API 文档会弄清楚一些事情:

appendTo

Type: Selector Default: "body" Which element the dialog (and overlay, if modal) should be appended to.

Source: jqueryUI

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