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

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();
    });
});