javascript - 在 onchange 事件上添加变量值

Question

我有一个表，我正在通过javascript添加新行，并在新行上添加事件，但它不起作用。

这是我的代码:

function moreitem() {
  document.getElementById('tottr').value = parseInt(document.getElementById('tottr').value) + 1;
  ain = document.getElementById('tottr').value;
  $('#mytable tbody tr:last')
    .after("<tr><td><select name='pid[]' id='' class='form-control' onchange='getstock(this.value,'st" + ain + "','pc" + ain + "')'><option value=''>Select Product</option><option value='1'>Drink</option></select></td><td><input type='text' id='st" + ain + "'  placeholder='Available Stock' class='form-control'></td><td><input type='text' id='qty" + ain + "' onchange='gettot(this.value,ain)' name='qty[]' placeholder='Quantity' class='form-control'></td><td><input type='text' id='pc" + ain + "'  name='pprice[]' placeholder='Per Piece Price' class='form-control'></td><td><input type='text'  name='tprice[]' placeholder='Total Price' id='tp" + ain + "' class='form-control'></td></tr>");
}

function getstock(inval, stid, pcid) {
  $.ajax({
    url: "getprice.php",
    data: "inval=" + inval + "&stid=" + stid + "&pcid=" + pcid,
    type: "post",
    success: function(e) {
      // alert(e);
      $('#hide').html(e);
    }
  })
  // alert(inval);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Product</th>
      <th>Stock</th>
      <th>Qty.</th>
      <th>Amount Per Piece</th>
      <th>Total Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tr1">
      <td>
        <select name="pid[]" id="" class="form-control" onchange="getstock(this.value,'st1','pc1')">
          <option value="1">hello</option>
          <option value="2">Hello2</option>
        </select>
      </td>
      <td><input type="text" id="st1" placeholder="Available Stock" class="form-control"></td>
      <td><input type="text" id="qty1" onchange="gettot(this.value,1)" name="qty[]" placeholder="Quantity" class="form-control"></td>
      <td><input type="text" id="pc1" name="pprice[]" placeholder="Per Piece Price" class="form-control"></td>
      <td><input type="text" name="tprice[]" placeholder="Total Price" id="tp1" class="form-control"></td>
    </tr>
  </tbody>
  <tfoot>

    <tr>
      <td colspan="5">
        <a href="#" onclick="moreitem()" class="btn btn-primary">Add More Item</a>
      </td>
    </tr>
  </tfoot>
</table>
<input type="hidden" id="tottr" value="1">

getstock 适用于第一行，但不适用于其他行，当我检查时，选择下拉菜单它显示如下:

onchange="getstock(this.value," st2','pc2')'="">

Answer 1

在对 html 字符串使用参数化函数时不要这样做。让它变得简单并将其传递给函数。

类似下面的内容

 var stvar="st"+ain;
  var pcvar="pc"+ain;

var ain = 1

function moreitem() {
    document.getElementById('tottr').value = parseInt(document.getElementById('tottr').value) + 1;
    ain = document.getElementById('tottr').value;
    var stvar = "st" + ain;
    var pcvar = "pc" + ain;
    $('#mytable tbody tr:last').after("<tr><td><select name='pid[]' id='sel_"+ain+"' class='form-control'><option value=''>Select Product</option><option value='1'>Drink</option></select></td><td><input type='text' id='st" + ain + "'  placeholder='Available Stock' class='form-control'></td><td><input type='text' id='qty" + ain + "' onchange='gettot(this.value,ain)' name='qty[]' placeholder='Quantity' class='form-control'></td><td><input type='text' id='pc" + ain + "'  name='pprice[]' placeholder='Per Piece Price' class='form-control'></td><td><input type='text'  name='tprice[]' placeholder='Total Price' id='tp" + ain + "' class='form-control'></td></tr>");
    $("#sel_"+ain).on("change",function(){
        getstock($(this).val(), stvar, pcvar) 
    })
}

function getstock(v, s, p) {
    console.log(v)
    console.log(s)
    console.log(p)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Product</th>
            <th>Stock</th>
            <th>Qty.</th>
            <th>Amount Per Piece</th>
            <th>Total Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr id="tr1">
            <td>
                <select name="pid[]" id="" class="form-control" onchange="getstock(this.value,'st1','pc1')">
                    <option value="1">hello</option>
                    <option value="2">Hello2</option>
                </select>
            </td>
            <td><input type="text" id="st1" placeholder="Available Stock" class="form-control"></td>
            <td><input type="text" id="qty1" onchange="gettot(this.value,1)" name="qty[]" placeholder="Quantity" class="form-control"></td>
            <td><input type="text" id="pc1" name="pprice[]" placeholder="Per Piece Price" class="form-control"></td>
            <td><input type="text" name="tprice[]" placeholder="Total Price" id="tp1" class="form-control"></td>
        </tr>
    </tbody>
    <tfoot>

        <tr>
            <td colspan="5">
                <a href="#" onclick="moreitem()" class="btn btn-primary">Add More Item</a>
            </td>
        </tr>
    </tfoot>
</table>
<input type="hidden" id="tottr" value="1">