多個動態輸入添加事件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>