Question

目标：

动态地将表单元素（在本例中为多个复选框）添加到表单中。

问题：

我的代码只生成一个复选框。

的假设：

范围问题。
一旦创建了一个html元素，然后使用jQuery将其附加到DOM或vDOM中的另一个元素，它就不能再次重用，我需要构建另一个元素。

CODE：

$pform = $('<form/>'); // Create a form element.
$pform_checkbox = $('<input/>').attr('type','checkbox'); // Create checkbox element.
$('body').append($pform); // Add form element within the body element.

//Goal is to add 5 checkboxes to the form.
//The result is only one checkbox is added. Why?
for (var x = 0; x<5; x++){
    //creating the checkbox element here will give me the proper result. 
    //$pform_checkbox = $('<input/>').attr('type','checkbox')
    $pform.append($pform_checkbox);
}

的jsfiddle：

http://jsfiddle.net/7ykjhdzd/

Answer 1

在循环中创建复选框：

$pform = $('<form/>'); // Create a form element.
$('body').append($pform); // Add form element within the body element.

for (var x = 0; x<5; x++){
    $pform_checkbox = $('<input/>').attr('type','checkbox')
    $pform.append($pform_checkbox);
}

Answer 2

这是因为之后造成的 $pform_checkbox = $('<input/>').attr('type','checkbox');

$ pform_checkbox成为对实际复选框的引用，因此每次进行迭代时都不会重新声明它只是尝试将相同的复选框附加到表单。

Answer 3

当您撰写$('<input/>')时，您是telling jQuery to create an input DOM element。它只创建一个input。

要创建该输入的副本，您可以使用.clone。如果您不首先克隆它，您只需重新附加相同的元素（只是将其移动到新位置）。

来自.append文档：

您还可以在页面上选择一个元素并将其插入另一个元素：
$( ".container" ).append( $( "h2" ) );
如果以这种方式选择的元素插入到单个位置在DOM的其他地方，它将被移动到目标（未克隆）：

以下代码演示.append只是更改DOM树中元素的位置：

＆＃13;

$("#div2").append($("#text"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Hello <span id="text">World</span></div>
<div id="div2">Div2: </div>

＆＃13;

通过jQuery向表单添加多个项目

3 个答案: