Javascript 如何使用jQuery将输入值插入更多填充的字段？

我有输入，我想使用jQuery将值传递给填充的字段。 因此，根据主输入，新填充的输入将具有不同的值

到目前为止，我已经尝试使用下面的注释jquery，但它不起作用。 我不熟悉jQuery，正在寻求帮助

 $(document).ready(function () {
       $(".add-more").click(function () {
               //this inputs values
               var mat = $('#mat').val();
                var one= $('#qty').val();
                //to this inputs
               $('#admore').val(mat);
                $('#adqty').val(one);

               var html = $(".copy").html();
               $(".hide").after(html);

           });


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

    }); 

<div class="panel-body">
    <form action="#">
        <div class="input-group control-group after-add-more issue-from">
             <input id="mat" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
             <input id="qty" type="text" name="qty[]" class="form-control barcode_qty_select" placeholder="QTY">

              <div class="input-group-btn"> 
                   <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i></button>
              </div>
         </div>
   </form>
    <div class="divider">
    </div>

     <!-- Copy Fields -->
    <div class="copy hide total_sales">
         <div class="control-group input-group drop_result" style="margin-top:10px">
         <input id="admore" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
         <input id="adqty" type="text" name="qty[]" class="form-control barcode_qty" placeholder="QTY">
             <div  class="form-control barcode_price"></div>
                 <div class="input-group-btn"> 
                      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i></button>
                  </div>
             </div>
      </div>                              
  </div>

$（文档）.ready（函数（）{
$（“.add more”）。单击（函数（）{
//这将输入值
var mat=$（'#mat'）.val（）；
var one=$（'#qty'）.val（）；
//对这一输入
$（'admore'）.val（mat）；
$（'#adqty'）.val（一个）；
var html=$（“.copy”）.html（）；
$（“.hide”）。在（html）之后；
});
$（“正文”）。在（“单击”，“删除”，函数（）{
$（this.parents（“.control group”）.remove（）；
});
}); 

您正在复制html（其中包含文本框），这就是为什么在首次添加后，会出现多个具有相同id的文本框。 如果您希望添加多个文本框，则必须按如下方式动态创建它们：

var count=1;
$(document).ready(function () {
   $(".add-more").click(function () {
           //this inputs values
           var mat = $('#mat').val();
            var one= $('#qty').val();
            //to this inputs
           if (count==1){
           $('#admore').val(mat);
            $('#adqty').val(one);
            }
            else{
            $('#admore'+count).val(mat);
            $('#adqty'+count).val(one);
            }
                            count++;
           //var html = $(".copy").html();
           var dyn = '<div class="control-group input-group drop_result" style="margin-top:10px">'
     dyn += '<input id="admore'+count+'" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">';
     dyn += '<input id="adqty'+count+'" type="text" name="qty[]" class="form-control barcode_qty" placeholder="QTY">';

  dyn += '</div>';
           $(".hide").after(dyn);

       });


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

}); 

var计数=1；
$（文档）.ready（函数（）{
$（“.add more”）。单击（函数（）{
//这将输入值
var mat=$（'#mat'）.val（）；
var one=$（'#qty'）.val（）；
//对这一输入
如果（计数=1）{
$（'admore'）.val（mat）；
$（'#adqty'）.val（一个）；
}
否则{
$（'admore'+count）.val（mat）；
$（'#adqty'+count）.val（一）；
}
计数++；
//var html=$（“.copy”）.html（）；
var dyn=“”
dyn+=''；
dyn+=''；
dyn+=''；
$（“.hide”）。在（dyn）之后；
});
$（“正文”）。在（“单击”，“删除”，函数（）{
$（this.parents（“.control group”）.remove（）；
});
}); 

---

我在这里做了一把小提琴

你有两个问题：

第一：不应该在HTML中创建两个相同的id元素。它也不会导致任何错误，但是当您使用id选择器来选择它们时，它只会找到一个元素。在代码中，您使用了copy

var html=$（“.copy”）.html（）$（“.hide”）。在（html）之后

创建新元素。同时，在其中创建相同的id元素

第二：在创建元素之前传递值，因此在之后创建的元素将不会获得值。这是我更改的代码，希望您接受

$(document).ready(function () {
  $(".add-more").click(function () {
    //this inputs values
    var mat = $('#mat').val();
    var one= $('#qty').val();

    var html = $(".copy").html();
    $(".hide").after(html);

    //to this inputs
    $('.admore').val(mat);
    $('.adqty').val(one);
  });
  $("body").on("click", ".remove", function () {
    $(this).parents(".control-group").remove();
  });
});
<div class="panel-body">
<form action="#">
    <div class="input-group control-group after-add-more issue-from">
        <input id="mat" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
        <input id="qty" type="text" name="qty[]" class="form-control barcode_qty_select" placeholder="QTY">

        <div class="input-group-btn">
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i></button>
        </div>
    </div>
</form>
<div class="divider">
</div>

<!-- Copy Fields -->
<div class="copy hide total_sales">
    <div class="control-group input-group drop_result" style="margin-top:10px">
        <input  type="text" name="addmore[]" class="admore form-control barcode_m" placeholder="Search or scan barcode..">
        <input  type="text" name="qty[]" class="adqty form-control barcode_qty" placeholder="QTY">
        <div  class="form-control barcode_price"></div>
        <div class="input-group-btn">
            <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i></button>
        </div>
    </div>
</div>

$（文档）.ready（函数（）{
$（“.add more”）。单击（函数（）{
//这将输入值
var mat=$（'#mat'）.val（）；
var one=$（'#qty'）.val（）；
var html=$（“.copy”）.html（）；
$（“.hide”）。在（html）之后；
//对这一输入
$（'.admore'）.val（mat）；
$（'.adqty'）.val（一个）；
});
$（“正文”）。在（“单击”，“删除”，函数（）{
$（this.parents（“.control group”）.remove（）；
});
});

---

从您的问题陈述中不清楚您要将值添加到哪个字段，您可以具体写入吗？输入id=“mat”和id=“qy”值，输入id=“admore”，id=“adqy”由于元素尚未呈现，所以它没有复制。您的JavaScript甚至不在脚本元素中。它已经在脚本元素中，但我退出只是想问：）我整天都在找这个。多谢各位@破解它