Javascript 无法在jquery中单击事件时生成动态输入字段

我有一个简单的HTML表单，其中包含5个用于添加公司详细信息的输入字段。HTML表单是使用Twitter引导设计的，最初是隐藏的。与表单一起，我有两个div标签-单击一个div标签div标签和内容-单击以生成公司表单显示HTML表单，再次单击该表单将再次生成相同的表单，以便用户可以将多个公司详细信息添加到一起。另一个div标记用于删除添加的HTML表单

我只能产生一次隐藏的形式。我无法再次生成它&再次生成

我加了一把小提琴来展示我迄今为止所取得的成就

这是jQuery代码

    $(document).ready(function(){

// Function to count total no. of company details added upon clicking add company div.
    if($('#start_count_value').val())
    {
    var i= $('#start_count_value').val();
    }
    else 
    {
    var i=0;
    }

// Function to show add company details form section upon clicking add company div.
    $("#add_company").click(function(){
    $('#add_company_div').before($("#add_company_div").clone().attr("id","add_company_div" + i));
    $("#add_company_div" + i).css("display","block");
    $("#add_company_div" + i + " :input").each(function(){
    $(this).attr("name",$(this).attr("name") + i);
    $(this).attr("id",$(this).attr("id") + i);
    $(this).attr("count",i);   
    });
    $("input[name=class_count]").remove();
    $('#add_company_div').append('<input type="hidden" class="class_count" name="class_count" value="'+i+'" />');     
    });

// Function to hide add company details form section upon clicking close div.
    $(document).on("click","#hide_company",function() {
    $(this).closest(".addcomp").remove();  
    });
    });

下面是我的HTML代码：

<div id="add_company_div" class="addcomp" style='display: none;'>
  <div class="col-sm-6 col-xs-12 own_pad">
    <input class="form-control input-sm" id="company_name" count="" type="text" name="company_name" placeholder="Company Name" >
  </div>
  <div class="col-sm-6 col-xs-12 own_pad">
    <div class="input-group">
      <input type="text" name="starting_date" class="form-control input-sm pull-right" id="start_date" placeholder="Starting Date" >
    </div>
  </div>
  <div class="col-sm-6 col-xs-12 own_pad">
    <input type="text" placeholder="No.of Employees" name=emp" id="emp" class="form-control input-sm">
  </div>
  <div class="col-sm-6 col-xs-12 own_pad">
    <input class="form-control input-sm" id="addr" type="text" name="addr" placeholder="Address" >
  </div>
  <div class="col-sm-6 col-xs-12 own_pad">
    <div class="input-group"> 
      <input id="offc_email" type="text" name="offc_email" class="form-control input-sm" placeholder="Company Email" >
    </div>
  </div>
  <div id="hide_company" class="col-sm-6 col-xs-12 own_pad minus">
    Click this DIV to Close
  </div>
</div>
<input type="hidden" id="start_count_value"  name="start_count_value" value="" />   
<input type="hidden" name="class_count" class="class_count" value="" />
<div class="box-footer clearfix no-border no_pad comp-foot">
  <div id="add_company" class="btn btn-success btn-sm pull-left"><i class="fa fa-plus"></i> Click to Generate Company Forms</div>
</div>

谁能告诉我哪里出的错

在添加表单后，您忘记了增加i。 添加i++；在单击处理程序的末尾，如下所示：

$("#add_company").click(function(){
    $('#add_company_div').before($("#add_company_div").clone().attr("id","add_company_div" + i));
    $("#add_company_div" + i).css("display","block");
    $("#add_company_div" + i + " :input").each(function(){
        $(this).attr("name",$(this).attr("name") + i);
        $(this).attr("id",$(this).attr("id") + i);
        $(this).attr("count",i);   
    });
    $("input[name=class_count]").remove();
    $('#add_company_div').append('<input type="hidden" class="class_count" name="class_count" value="'+i+'" />');
    i++;
 });

在添加表单后，您忘记了增加i。 添加i++；在单击处理程序的末尾，如下所示：

$("#add_company").click(function(){
    $('#add_company_div').before($("#add_company_div").clone().attr("id","add_company_div" + i));
    $("#add_company_div" + i).css("display","block");
    $("#add_company_div" + i + " :input").each(function(){
        $(this).attr("name",$(this).attr("name") + i);
        $(this).attr("id",$(this).attr("id") + i);
        $(this).attr("count",i);   
    });
    $("input[name=class_count]").remove();
    $('#add_company_div').append('<input type="hidden" class="class_count" name="class_count" value="'+i+'" />');
    i++;
 });

---

这是不对的。它为输入字段生成不同的id。它不是为表单生成公司名称0、起始日期0、emp0、地址0、offc\U email0，而是生成公司名称0、起始日期1、emp2、地址3、offc\U email4。因此，当更多的公司加入时，我将无法将它们存储在一起。我将无法在php代码中获取它们@马克Berghaus@Fyou你是对的，我把i++定位错了。由于缺少缩进，我没有看到每一个；看看我最新的答案，这不对。它为输入字段生成不同的id。它不是为表单生成公司名称0、起始日期0、emp0、地址0、offc\U email0，而是生成公司名称0、起始日期1、emp2、地址3、offc\U email4。因此，当更多的公司加入时，我将无法将它们存储在一起。我将无法在php代码中获取它们@马克Berghaus@Fyou你是对的，我把i++定位错了。由于缺少缩进，我没有看到每一个；请参阅我的最新答案。