动态添加元素中的 Keyup 事件处理程序

Question

"Total" 输入在添加的元素中不起作用！它只在第一行有效！有什么帮助吗？ ..................................................... ..................................................... ..................................................... ..........

$(document).ready(function(){



 $('input').on('keyup', function () {
 $('#total').val($('#price').val() * $('#qua').val());
 });


 var i=1;
 $('#add_input').click( function(){

  var newInput = $('<tr id="row'+i+'"><div><td><input type="text" name="type[]" placeholder="Select Product"/></td><td><input type="text" name="des[]" placeholder="Product Description"/></td><td><input type="text" name="qua[]" id="qua" placeholder="Quantity"/></td><td><input type="text" name="price[]" id="price" placeholder="Price"/></td><td><input type="text" name="total[]" id="total" placeholder="Total" readonly/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">Remove</button></td></div></tr>');

  i++;
  $('#dynamic').append(newInput);


 });



 $(document).on('click', '.btn_remove', function(){
  var button_id = $(this).attr("id");
  $('#row'+button_id+'').remove();
 });


 $('#submit').click(function(){
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:$('#add_me').serialize(),
   success: function(data)
   {
    alert(data);
    $('#add_me')[0].reset();
   }
  });
 });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Testing</h1>
<form name="add_me" id="add_me">
<table id="dynamic">
 <tr>
  <td><input type="text" name="type" placeholder="Select Product"/></td>
  <td><input type="text" name="des" placeholder="Product Description"/></td>
  <td><input type="text" name="qua" id="qua" placeholder="Quantity"/></td>
  <td><input type="text" name="price" id="price" placeholder="Price"/></td>
  <td><input type="text" name="total" id="total" placeholder="Total" readonly/></td>

 </tr>
 <button type="button" name="add" id="add_input">Add</button>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
</body>

Answer 1

$('body').on('input', 'keyup', function () {
  var price = $(this).closest('tr').find('[data-price]').val();
  var qua = $(this).closest('tr').find('[data-qua]').val();
  $(this).closest('tr').find('[data-total]').val( price * qua );
});

因为js在你启动页面和创建事件后运行一次。要与动态添加的事件一起使用，您必须在父级上创建事件（我通常使用 $('body') ）

id 也必须是唯一的，所以最好是

var newInput = $('<tr id="row'+i+'"><div><td><input type="text" name="type[]" placeholder="Select Product"/></td><td><input type="text" name="des[]" placeholder="Product Description"/></td><td><input type="text" name="qua[]" data-qua='' placeholder="Quantity"/></td><td><input type="text" name="price[]" data-price='' placeholder="Price"/></td><td><input type="text" name="total[]" data-total='' placeholder="Total" readonly/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">Remove</button></td></div></tr>');

<table id="dynamic">
<tr>
    <td><input type="text" name="type" placeholder="Select Product"/></td>
    <td><input type="text" name="des" placeholder="Product Description"/></td>
    <td><input type="text" name="qua" data-qua='' placeholder="Quantity"/></td>
    <td><input type="text" name="price" data-price='' placeholder="Price"/></td>
    <td><input type="text" name="total" data-total='' placeholder="Total" readonly/></td>

</tr>
<button type="button" name="add" id="add_input">Add</button>

Answer 2

原因是您的新 tr 没有绑定任何事件。解决方案：在你的 table 之后有一个不可见的行模板，在你的输入标签中使用 class 而不是 id :

  <div style="display:none">
   <tr id="row_template">
    <td><input type="text" name="type" placeholder="Select Product"/></td>
    <td><input type="text" name="des" placeholder="Product Description"/></td>
    <td><input type="text" name="qua" class="qua" placeholder="Quantity"/></td>
    <td><input type="text" name="price" class="price" placeholder="Price"/></td>
    <td><input type="text" name="total" class="total" placeholder="Total" readonly/></td>
<td><button type="button" name="remove" class="btn_remove">Remove</button></td>
    </tr> 
  </div>

在你的 js 中：

 $('input.price,input.qua').on('keyup', function () {
 var parent_tr = $(this).closest('tr');
 parent_tr.find('.total').val(parent_tr.find('.price').val() * parent_tr.find('.qua').val());
 });

 var i=1;

    $('#add_input').click( function(){

    //to copy the template tr with its binding events (.on('keyup')...) :
    var newInput = $('#row_template').clone(true).attr("id",i);

    i++;

    $('#dynamic').append(newInput);
    });

 $(document).on('click', '.btn_remove', function(){
     $(this).closest("tr").remove();
});

动态添加元素中的 Keyup 事件处理程序

Keyup Event Handler in dynamically added elements

jquery

append

addeventlistener

keyup

eventhandler