Добавление нескольких элементов в форму с помощью JQuery

Question

ЦЕЛИ:

Динамического добавления элементов формы, в данном случае ряда флажков-к форме.

ПРОБЛЕМА:

Мой код производит только один флажок.

УСЛОВИЕ:

1. Scope вопрос.
2. Как только элемент html создается, а затем прикрепляется к другому элементу в DOM или vDOM с помощью jQuery, его нельзя повторно использовать повторно, и мне нужно создать другой.

КОД:

$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

Когда вы пишете $('<input/>'), вы являетесь telling jQuery to create an input DOM element. Он создает только один input.

Для того, чтобы создать копию этого ввода, вы можете использовать .clone. Если вы сначала не клонируете его, вы просто будете повторно добавлять один и тот же элемент (который просто перемещает его в новое место).

Из .append документации:

Вы также можете выбрать элемент на странице и вставить его в другой:

$(".container").append($("h2")); 

Если элемент, выбранный таким образом, вставляется в одном месте в другом месте DOM, он будет перемещен в цель (не клонирован):

Описание крыло код демонстрирует, что .append просто изменяет положение элемента в дереве DOM:

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

<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>

Answer 2

Создать флажок внутри цикла:

$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 3

Это вызвано тем, что после того, как $pform_checkbox = $('<input/>').attr('type','checkbox');

$ pform_checkbox становится ссылкой на фактический флажок, поэтому без повторного использования его каждый раз, когда вы проходите через итерацию, он просто пытается добавить тот же флажок в форму.