Question

我正在使用JQuery和Jquery UI来创建一个包含自定义表单的对话框。我有一个基本的对话框，它的主体附加了一个工具。所以我的对话框的基本结构是Jquery UI Frame＆gt;对话框＆gt; ToolBody＆gt;工具内容。

Code: 

ToolManager.prototype.showTool = function(tool){
    var $container = $("#" + this.id);
    var $tool = $("#" + tool.id);
    var $toolBody = $("#" + this.toolBodyId);

    $container.dialog({
        resizable: false,
        modal: true,
        width: tool.width,
        stack: true,
        height: 'auto',
        draggable: true,
        close: this.tearDown,
        open: this.setup
    });

    $tool.removeClass("hidden");
    $toolBody.append($tool.html());
    //$toolBody.append($tool);
    $container.show();
};

尽管需要重构，但这仍有效，但在使用此方法之前，我尝试使用注释掉的行：

 $toolBody.append($tool);

此方法对我的布局造成严重破坏，并导致附加内容无法获得焦点。任何人都可以解释附加Jquery对象和附加html字符串之间的区别吗？或者为什么这样做？

Answer 1

AFAIK，一个对象是对DOM元素的引用，而不是该元素的副本。

所以你可以使用html（）来显示它的所有html内容，或者使用text（）来显示它的所有文本内容，并删除标签。

你可能最好使用clone（）来制作精确的副本，并且可以与appendTo（）一起使用

类似于：$(tool).clone().appendTo().toolBody

Answer 2

这行代码：

$toolBody.append($tool);

将获取$ tool中的节点，并将移动到$ toolBody的第一个（希望是唯一的）节点。

这行代码：

$toolBody.append($tool.html());

转换$ tool中的所有HTML代码并将其转换为字符串。 jQuery Append方法周围有糖，并且足够聪明地意识到当你尝试append()字符串时，它应该首先将该字符串转换为一组节点。

实际上，你正在移动前者和案例中的节点，并在后一种情况下对$ tool内的节点进行（差）克隆。

.append（）为不同的参数类型生成不同的结果

2 个答案: