Question

我正在使用Bootstrap，我想在每次用户点击＆＃34;添加＆＃34;时添加一组字段。按钮。我写了一部分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--;
        }
    });
});

每当我点击添加按钮时，我都会使用正确的值＆＃39; i＆＃39;，但这些字段不是自己添加的。它随机为我工作 - 有时我需要添加行，然后删除它然后我可以再添加两行，等等。你能看看我的小提琴：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

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

每次用户点击按钮时，如何向表单添加字段组？

2 个答案: