複数の動的入力イベントを追加するjqueryとcall 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

あなたの落書きは、入力フィールドの2つの行を示しています。 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>