克隆到<form>

Question

通过克隆来自'fs-form'的字段，无论何时更改/更新'fs-form'，我都无法检索所选的值

$("<form>").append($('fieldset[name=fs-form]').clone())

但如果要对dom进行，则可以看到所选值。

$("form").append($('fieldset[name=fs-form]').clone())

Answer 1

jQuery选择器基于CSS选择器。 Reference

因此，当您第一次执行$("<form>")时，它会搜索与标记<form>的最佳匹配，但不会返回元素对象。

然而在第二种情况$("form")中，CSS选择器进入图片并且它搜索元素form并返回一个jQuery元素对象。

以下是您将获得的结果示例：

console.log(jQuery('<div class="post-menu">'));
Result: n.fn.init [div.post-menu]

console.log(jQuery('.post-menu'));
Result: n.fn.init [div.post-menu, prevObject: n.fn.init(1), context: document, selector: ".post-menu"]

使用选择器和没有选择器注意结果。 对于访问元素进行操作，如在你的情况下追加，总是使用标准的CSS选择器。

Answer 2

A。 $("form").append($('fieldset[name=fs-form]').clone())：

1. 搜索form代码。
2. 使用name=fs-form搜索所有字段集元素。
3. 将搜索到的字段集元素附加到搜索到的form元素。
4. 制作form元素的副本，包括所有字段集元素。

B。 $("<form>").append($('fieldset[name=fs-form]').clone())：

1. 创建新的form元素。
2. 使用name=fs-form搜索所有字段集元素。 （与上一节的第二阶段一样）
3. 将搜索到的字段集元素附加到新创建的form元素。
4. 制作新创建的form元素的副本，包括所有字段集元素。

因此，当您使用$('<form>')时，实际上您将fielset与现有表单分开并将其附加到新创建的表单。因此，实际上，前一个表单不包含任何fieldset元素。

但是当你使用$('form')时，会从中取出字段集元素并再次添加到其中。

请参阅下面的示例，了解这两者之间的区别。

示例A：

＆＃13;
＆＃13;
function copy() {
    var copy = $( 'form' ).append($( 'fieldset[name="fs-form"]' ) ).clone();
    copy.appendTo( 'body' )
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
    <fieldset name="fs-form">
        Name: <input type="text"><br>
        Email: <input type="text">
    </fieldset>
</form>

<button type="button" onclick="copy()">Clone &dollar;( 'form' ) and append to body</button>
＆＃13;
＆＃13;
＆＃13;

例B：

＆＃13;
＆＃13;
function copy() {
    var copy = $( '<form>' ).append($( 'fieldset[name="fs-form"]' ) ).clone();
    copy.appendTo( 'body' )
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
    <fieldset name="fs-form">
        Name: <input type="text"><br>
        Email: <input type="text">
    </fieldset>
</form>

<button type="button" onclick="copy()">Clone &dollar;( '&lt;form&gt;' ) and append to body</button>
＆＃13;
＆＃13;
＆＃13;