dropdown onchange动作无法在动态表单生成中起作用

Question

问题

我通过点击按钮动态生成表单。在该表格中，我将发票下拉列表更改为下一个文本框中打印的发票金额值。这个动作可以在ajax中完成。我的问题是改变功能不起作用。

代码

var i = 0;
var wrapper = $("#addcollection_div");
$('#addnew').click(function (e) {
    var customer = $("#clientname").val();
i += 1;
        if (i == 1) {
                $.post('includes/ajax_timesheet.php', {'cust': customer, 'action': 'getinvoice'}, function (data) {
                    $("#invno").html(data);
                    $("#addcollection_div").show();
                });
        }else if(i > 1){
            e.preventDefault();
                $(wrapper).append(
                            '<tr>'+
                            '<td size="5">' + '<input type="text" name="" class="form-control" size="5" id="" value="'+i+'" readonly >' + '</td>'+
                            '<td size="25">'+
                                '<select id="invno'+i+'" name="invno[]"  class="select-mini student" >'+
                                    '<option Selected value="Select">Select Invoice No </option>'+
                                '</select>'+
                            '</td>'+
                            '<td size="10">'+
                                '<input type="text" id="inv_amt'+i+'" name="inv_amt[]"  class="form-control" size="25" value="" readonly>'+
                            '</td>'+
                            '<td size="10">'+
                                '<input type="text" id="due_amt'+i+'" name="due_amt[]"  class="form-control"  value="" readonly>'+
                            '</td>'+
                            '<td>'+
                                '<input type="text" id="cheque_amt'+i+'" name="cheque_amt[]"  class="form-control"  value="" onkeypress="return isNumberKey(event)" maxlength="12">'+
                            '</td>'+
                            '<td>'+
                                '<input type="text" id="tds'+i+'" name="tds[]"  class="form-control"  value="" onkeypress="return isNumberKey(event)" maxlength="12" >'+
                            '</td>'+
                            '<td>'+
                                '<input type="text" id="deduction'+i+'" name="deduction[]"  class="form-control"  value="" onkeypress="return isNumberKey(event)" maxlength="12">'+
                            '</td>'+
                            '<td>'+
                                '<input type="text" id="retention'+i+'" name="retention[]"  class="form-control"  value="" onkeypress="return isNumberKey(event)" maxlength="12">'+
                            '</td>'+
                            '<td>'+
                               '<input type="text" id="remarks'+i+'" name="remarks[]"  class="form-control"  value="">'+
                            '</td>'+
                            //'<td><a href="#" class="remove_field" >Remove</a></td>'+
                            '<td><a href="#" class="remove_field" ><input type="image" src="../../css/images/delete_btn.gif" name="deletedep" border="0" ></a></td>'+
                            '</tr>');

                $.post('includes/ajax_timesheet.php', {'cust': customer, 'action': 'getinvoice'}, function (data) {
                    $("#invno"+i).html(data);
                }); 
        }

});


$("#invno"+i).change(function () {

    var invno = $("#invno"+i).val();
    $.post('includes/ajax_timesheet.php', {'invoiceno': invno, 'action': 'getinv_total'}, function (data) {
        $("#inv_amt"+i).val($.trim(data));
    });

    $.post('includes/ajax_timesheet.php', {'invoiceno': invno, 'action': 'getaddue_amt'}, function (data) {
        $("#due_amt"+i).val($.trim(data));
    });
});

Answer 1

$(document).on('change', '.invo', function () {
  alert('test');
  });