我如何添加一组字段到我的表单每次用户点击一个按钮

How can I add group of fields to my form every time user hits a button?

本文关键字：用户 按钮 一个 表单 字段 何添加 添加 一组 我的      更新时间：2023-09-26

我使用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/吗告诉我出了什么问题，我如何在每次用户点击按钮时添加一组字段?谢谢!

元素$('#singleCommercial' + i)不存在，当您试图设置它的HTML。将该行移动到下一行的下面，添加到文档中:

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

这是您的JSFiddle的工作更新版本:http://jsfiddle.net/7yd5o63q/2/.

添加$ (' # singleCommercial + i) . html("…");追加后的行。这里的问题是，您正在向一个还不存在的元素添加HTML。当您再次单击按钮时，发生的情况是，前一个i值的div正在获取下一个的HTML内容:-)。

相关文章：