每次用户单击按钮时，如何将字段组添加到表单中？

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--;
        }
    });
});

每次当我点击添加按钮时，都会弹出一个带有适当值“ i”的弹出窗口，但是这些字段不是自己添加的。 它对我来说是随机的-有时我需要添加行，然后将其删除，然后我可以再添加两行，依此类推。您能否看一下我的小提琴： http : //jsfiddle.net/7yd5o63q/并告诉我什么地方有问题，每当用户按下按钮时，如何添加字段组？ 谢谢！

Answer 1

尝试设置其HTML时，元素$('#singleCommercial' + i)不存在。 将该行移至添加文档的下一行下方：

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

这是您的JSFiddle的有效更新版本： http : //jsfiddle.net/7yd5o63q/2/ 。

Answer 2

添加您的$（'＃singleCommercial'+ i）.html（'...'）; 追加之后的行。 这里的问题是您正在将HTML添加到尚不存在的元素中。 再次单击该按钮时，发生的是前一个i值的div正在获取下一个:-)的HTML内容。