我如何使用引导程序创建动态输入字段

Question

我已经创建了输入字段，但是当我单击前两个字段时，效果很好，直到当我请求第三个字段介于前两个字段之间时，其他字段也出现了。请帮忙一下。 这是我的JavaScript代码：

<script type="text/javascript">

    $(document).ready(function() {

    it to after "after-add-more" div class.
      $(".add-more").click(function(){ 
          var html = $(".copy-fields").html();
          $(".after-add-more").after(html);
      });

      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });

    });

</script>

Answer 1

 $(document).ready(function() { $(".add-more").on('click', function(){ var html = $(".copy-fields").clone(); $(".after-add-more").after(html[0]); }); $("body").on("click",".remove",function(){ $(this).parents(".control-group").remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class = "add-more">ADD</button> <div class = "after-add-more"></div> <div class = "copy-fields"><input type = "text" /></div> </div> 

因为您正在尝试复制.copy-fields类的html内容，所以请使用clone（）而不是html（），然后使用html [0]进行插入，如下所示：

$(document).ready(function() {
    $(".add-more").click(function(){
        var html = $(".copy-fields").clone();
        $(".after-add-more").after(html[0]);
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents(".control-group").remove();
    });
});