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

Unable to generate dynamic input fields on click event in jquery

本文关键字：动态 字段 输入 事件 单击 jquery      更新时间：2023-09-26

我有一个简单的HTML表单，其中包含5个用于添加公司详细信息的输入字段。HTML表单是使用Twitter-Bootstrap设计的，最初是隐藏的。除了表单，我还有两个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++;
 });
相关文章：