Question

添加字段的值返回undefined。

我添加的输入

 var i = 1;
$('#add_field').click(function(){
   i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td class="col-md-5"><textarea id="name" class="borders table-control" type="text" rows="1" cols="45" name="name[]"></textarea></td><td class="col-md-2"><input class="borders table-control price" type="text" id="price name="price[]"></td><td class="col-md-2"><input class="borders table-control qty" id="qty" type="text" name="qty[]"></td><td class="col-md-2"><input class="form-control total" id="total" type="text" name="total[]"></td><td class="text-center"><span id="'+i+'" style="color: red" name="remove" class="btn_remove"><i class="fa fa-times" aria-hidden="true"></i></span></td></tr>');

});

这是我的jquery代码，用于从输入中获取值

$(document).on('change', '#dynamic_field', function(event){


    var id = $('#prod_id').val();  <----I got the id.

    var name = $('#name').val();  <-----cant get value name 
    var price = $("#price").val();  <-----cant get value price 
    var qty = $("#qty").val();  <-----cant get value qty 
    var total = $("#total").val();  <-----cant get value total

任何想法？谢谢

Answer 1

将您的ID更改为班级，#dynamic_field不是输入，因此您没有更改事件，

让我们说你改变价格输入的值：

var i = 1;
    $('#add_field').click(function(){
       i++;
        $('#dynamic_field').append('<tr id="row'+i+'"><td class="col-md-5"><textarea class="name borders table-control" type="text" rows="1" cols="45" name="name[]"></textarea></td><td class="col-md-2"><input class="borders table-control price" type="text" name="price[]"></td><td class="col-md-2"><input class="borders table-control qty" type="text" name="qty[]"></td><td class="col-md-2"><input class="form-control total" type="text" name="total[]"></td><td class="text-center"><span id="'+i+'" style="color: red" name="remove" class="btn_remove"><i class="fa fa-times" aria-hidden="true"></i></span></td></tr>');
    
    });


    $('body').on('change','.price',function(){
        var closestParent = $(this).closest('tr');//get the values relative to the parent
        var name = closestParent.find('.name').val(); 
        var price = closestParent.find(".price").val(); 
        var qty = closestParent.find(".qty").val(); 
        var total = closestParent.find(".total").val(); 
        console.log(name,price,qty,total);
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_field">Add</button>
<div id="dynamic_field"></div>

Answer 2

#dynamic_field未输入，因此没有change事件。为input和textarea添加更改事件处理程序。

考虑将id选择器更改为class选择器，因为id选择器只返回第一个匹配元素，因此此代码不适用于后续行。

 var i = 1;
$('#add_field').click(function(){
   i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td class="col-md-5"><textarea id="name" class="borders table-control" type="text" rows="1" cols="45" name="name[]"></textarea></td><td class="col-md-2"><input class="borders table-control price" type="text" id="price" name="price[]"></td><td class="col-md-2"><input class="borders table-control qty" id="qty" type="text" name="qty[]"></td><td class="col-md-2"><input class="form-control total" id="total" type="text" name="total[]"></td><td class="text-center"><span id="'+i+'" style="color: red" name="remove" class="btn_remove"><i class="fa fa-times" aria-hidden="true"></i></span></td></tr>');

});

$('#dynamic_field').on('change', 'input, textarea', function(event){


    var id = $('#prod_id').val(); 

    var name = $('#name').val();  
    var price = $("#price").val();
    var qty = $("#qty").val();  
    var total = $("#total").val(); 
    
    console.log(name, price, qty, total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dynamic_field">
</table>
<button id="add_field">
Add Fields
</button>

另外，避免在JS中生成HTML（作为字符串）并考虑使用模板。例如。 - Jquery Templates

如何从动态创建的输入jquery获取值

2 个答案: