Как добавить группу полей в мою форму каждый раз, когда пользователь нажимает кнопку?

Question

Я использую Bootstrap, и я хочу добавить группу полей каждый раз, когда пользователь нажимает кнопку «добавить». Я написал часть JavaScript:

$(document).ready(function(){ 
    var i = 1; 
    $("#add_row").click(function(){ 
     $('#singleCommercial' + i).html('...'); 
     $('#listOfCommercials').append('<div id="singleCommercial' + i + '"></div>'); 
     i++; 
     alert(i); 
    }); 

    $("#delete_row").click(function() { 
     if (i > 1) { 
      $("#singleCommercial" + (i - 1)).html(''); 
      i--; 
     } 
    }); 
}); 

Каждый раз, когда я нажал на кнопку добавления, я получаю всплывающее окно с надлежащим значением «я», но поля не добавляются по себе. Он работает случайным образом для меня - иногда мне нужно добавить строку, а затем удалить ее, а затем добавить еще две строки и т. Д. Не могли бы вы посмотреть мою скрипку: http://jsfiddle.net/7yd5o63q/ и сказать мне, что случилось, и как я могу добавить группу полей каждый пользователь времени нажимает кнопку? Спасибо!

Answer 1

Элемент $('#singleCommercial' + i) не существует, когда вы пытаетесь установить его HTML. Переместить эту строку ниже в следующей строке, где вы добавляете это сделать документ:

$('#listOfCommercials').append('<div id="singleCommercial' + i + '"></div>'); 
$('#singleCommercial' + i).html('...'); 

Вот работает обновленная версия вашего JSFiddle: http://jsfiddle.net/7yd5o63q/2/.

Answer 2

Добавьте свой $ ('# singleCommercial' + i) .html ('...'); line ПОСЛЕ добавления. Проблема заключается в том, что вы добавляете HTML к элементу, который еще не существует. Когда вы снова нажимаете кнопку, происходит то, что div предыдущего значения i получал содержимое HTML для следующего :-).