多个动态输入添加事件jQuery和调用AJAX

Question

我有表内动态多输入。

我想在每个id文本框中添加事件，并在每个数量上添加事件并调用ajax。最后，在值更改时在小计上添加事件，添加新行多个输入。

你能帮我吗？

<td><input type="text" maxlength="13" name="id[]" id="id" required></td> 
<td><input type="text" name="name[]" id="name" readonly required></td> 
<td><input type="text" name="quantity[]" id="quantity" required></td> 
<td><input type="text" name="price[]" id="price" readonly required></td> 
<td><input type="text" name="subtotal[]" id="subtotal" readonly required></td> 

<script> 
$(document).ready(function(){ 
    $("#id").each(function(index, item){ 
     $(item).on("change paste keyup", function(){ 
      var id = $(this).val(); 
      $.ajax({ 
       dataType: 'json', 
       url:"load_product.php", 
       method:"POST", 
       data:{id:id}, 
       success:function(data) { 
        $('#name').val(data.name); 
        $('#price').val(data.price); 
       } 
      }); 
     }); 
    }); 

    $("#quantity").on("change paste keyup", function(){ 
     var qty = $(this).val(); 
     var price = $('#price').val(); 
     var subtotal = qty * price; 
     $('#subtotal').val(subtotal); 
    }); 
}); 
</script> 

Answer 1

你的涂鸦显示输入字段的两行。如果两行中的id字段包含id="id"，则可能存在问题：ID必须是唯一。最好在ID中添加一个数字（例如id="id1"）或使用class或data-属性。

如果您还想动态添加行到您的表中，您应该使用jQuery的on function with the selector parameter。否则，新元素将不会自动绑定到事件。

这是使用data-属性，包括一个按钮，插入新行一个可能的解决方案：

$(document).ready(function(){ 
 
    var groupCount = 0; 
 
    
 
    String.prototype.replaceAll = function(search, replacement) { 
 
     var target = this; 
 
     return target.split(search).join(replacement); 
 
    }; 
 
    
 
    var rowTemplate = '<tr>'+ 
 
     '<td><input type="text" size="3" maxlength="13" name="id[]" data-group="%group%" data-id="id" required></td>'+ 
 
     '<td><input type="text" size="3" name="name[]" data-group="%group%" data-id="name" readonly required></td>'+ 
 
     '<td><input type="text" size="3" name="quantity[]" data-group="%group%" data-id="quantity" required></td>'+ 
 
     '<td><input type="text" size="3" name="price[]" data-group="%group%" data-id="price" value="4" readonly required></td>'+ 
 
     '<td><input type="text" size="3" name="subtotal[]" data-group="%group%" data-id="subtotal" readonly required></td>'+ 
 
     '</tr>'; 
 
    
 
    for (var i=0; i<2; i++) { 
 
     groupCount++; 
 
     $('#mytable tr:last').after(rowTemplate.replaceAll('%group%', groupCount)); 
 
    } 
 
    
 
    $(document).on("change paste keyup", "input[data-id='id']", function(){ 
 
     var id = $(this).val(); 
 
     var group = $(this).data('group'); 
 
    \t \t console.log('id:', id, group); 
 
    }); 
 

 
    $(document).on("change paste keyup", "input[data-id='quantity']", function(){ 
 
     var qty = $(this).val(); 
 
     var group = $(this).data('group'); 
 
     var price = $("input[data-id='price'][data-group='"+group+"']").val(); 
 
     var subtotal = qty * price; 
 
     $("input[data-id='subtotal'][data-group='"+group+"']").val(subtotal); 
 
    }); 
 
    
 
    $("#btnadd").on('click', function() { 
 
     groupCount++; 
 
     $('#mytable tr:last').after(rowTemplate.replaceAll('%group%', groupCount));  
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
<tr> 
 
    <th>id</th> 
 
    <th>name</th> 
 
    <th>qty</th> 
 
    <th>price</th> 
 
    <th>subtotal</th> 
 
</tr> 
 
</table> 
 
<button id="btnadd">New row</button>