Php不工作添加更多行（中继器）

Question

我使用表单中继器创建发票。发票有多个产品来自数据库和价格。 当我选择产品时，其自动价格出现在费用框中，并且还有其他输入框，如折扣和百分比，默认值为0 0。第一行工作得很好。但是当我点击添加更多按钮来生成下一行添加另一个产品。

在下一行中，我可以从下拉列表中选择产品。但其费用没有出现，其他输入框值如折扣和百分比也消失（他们没有显示任何默认值。）

这是我的HTML代码。

<div class="row"> 
    <div class="col-xs-3"> 
     <label for="single" class="control-label">Select Invoice Type</label> 
    </div> 
    <div class="col-xs-2">Fee</div> 
    <div class="col-xs-1">Quantity</div> 
    <div class="col-xs-1">Discount</div> 
    <div class="col-xs-2">Total</div> 
    <div class="col-xs-1">Doctor %</div> 
</div> 
<div class="mt-repeater"> 
    <div data-repeater-list="group-b"> 
     <div data-repeater-item class="row"> 
      <div class="col-xs-3"> 
       <div class="form-group"> 
        <select id="invoice" class="form-control" name="invoice"> 
         <option></option> 
         <?php 
          $select = mysqli_query(connection(), "select * from treatement"); 
          while($r = mysqli_fetch_array($select)) { 
           echo "<option value='$r[0]'>$r[name]</option>"; 
          } 
         ?> 
        </select> 
       </div> 
      </div> 
      <div class="col-xs-2"> 
       <div class="form-group"> 
        <input type="text" value="" class="form-control" placeholder="Fee" name="fees" id="fees"> 
       </div> 
      </div> 
      <div class="col-xs-1"> 
       <div class="form-group"> 
        <input type="text" class="form-control" value="1" name="quantity" > 
       </div> 
      </div> 
      <div class="col-xs-1"> 
       <div class="form-group"> 
        <input type="text" value="0" class="form-control" placeholder="Discount" name="discount"> 
       </div> 
      </div> 
      <div class="col-xs-2"> 
       <div class="form-group"> 
        <input type="text" value="0" class="form-control" placeholder="Total" readonly name="total"> 
       </div> 
      </div> 
      <div class="col-xs-2"> 
       <div class="form-group"> 
        <input type="text" value="0" class="form-control" placeholder="%" name="percentage"> 
       </div> 
      </div> 
      <div class="col-md-1"> 
       <a href="javascript:;" data-repeater-delete class="btn btn-danger"> 
       <i class="fa fa-close"></i> 
       </a> 
      </div> 
     </div> 
    </div> 
    <a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add"> 
    <i class="fa fa-plus"></i> Add More 
    </a> 
    <br> 
    <br> 
</div> 

而且我使用js函数来比较每个产品的费用。这有助于我在一个盒子里显示费用。

$(document).ready(function() { 
    $("#invoice").change(function() { 
     var value = $(this).val(); 
     $.get("get_fees.php", { 
      id: value 
     }, function(data) { 
      $("#fees").val(data); 
     }) 
    }) 
}) 

Answer 1

请..不要使用这样的ID。 ID必须是唯一的，你应该使用类而不是ID（见barmar评论）

<p id="test"></p> 
<p id="test"></p> 
<p id="test"></p> 

应该

<p id="test1" class="test"></p> 
<p id="test2" class="test"></p> 
<p id="test3" class="test"></p> 

你的是，我不使用同一ID，因为ID必须是唯一的。

• 1个ID必须由1个元素使用。
• 1类可以由很多元素

使用，但是，你仍然可以破解这个。 $('select[id="invoice"]')

，似乎你创建新的DOM，你可以改变这一行

$("#invoice").change(function() {

成为

$("body").on('change', 'select[id="invoice"]', function() {

UPDATE： 为什么你总是改变你的第一选择/对第一个id =费用。因为你使用$('#fees').val()

必须指定，具有：获取父（我closest()使它），然后找到您要更改

，因为你不特定的ID =“费”有识别你的父母中继anyspecific类，我选择添加rowsdata类

变化<div data-repeater-item class="row">与<div data-repeater-item class="row rowsdata">

和你的脚本将看起来像这样

$("body").on('change', 'select[id="invoice"]', function() { 
    var select = $(this); 
    $.get("get_fees.php", { 
     id: select.val() 
    }, function(data) { 
     select.closest('.rowsdata').find('input[id="fees"]').val(data); //if you still give id="fees" and dont have any class use this 
     //select.closest('.rowsdata').find('.fees').val(data); if you already give class="fees", use this 
    }); 
});