jquery - 多个动态输入添加事件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 。否则新元素将不会自动绑定(bind)到事件。

这是使用 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');
   		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>