Добавление значения переменной в событие onchange

Question

У меня есть table, и я добавляю новую строку через javascript и добавляю event к новой строке, но она не работает.

Вот мой код:

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 работает для first row, но не для других строк, а когда i inspect для выбора dropdown, это показано ниже:

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">

Answer 2

Я думаю, что единственная кавычка до gettock и перед st2 запутывается. Вы можете избежать и напечатать двойные кавычки для события onchange, чтобы внутренняя одинарная и внешняя двойные кавычки не перепутались. Я надеюсь, что приведенный ниже код поможет.

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">