带有.change功能的下拉菜单无法使用新的动态添加字段

时间:2017-03-12 13:00:27

标签: javascript php html mysql ajax

所以我有这个HTML代码:

<div class="col-md-12 pad-bottom">
    <table id="paymentdynamic" class="table">
        <thead>
            <th>Fee Type</th>
            <th>Amount</th>
            <th>Specific Balance</th>
            <th>Account Balance</th>
            <th></th>
            <th><button type="button" name="add_input" id="add_input" class="btn btn-primary"> Add </button></th>

        </thead>
        <tbody>
        <tr>
            <td>
                <select class="form-control" name="feetype[]" id="feetype">
                    <option></option>
                    <option>Tuition Fee</option>
                    <option>Miscellaneous Fee</option>
                    <option>Computer Fee</option>
                    <option>Aircon Fee</option>
                    <option>Book Fee</option>s
                </select>
            </td>
            <td><input type="text" class="form-control" name="feeamount[]" id="feeamount" oninput="getBalance();"></td>
            <td><input type="text" class="form-control" name="feebalance[]" id="feebalance" readonly></td>
            <td><input type="text" class="form-control" name="accountbalance[]" id="accountbalance" readonly></td>
            <td><input type="hidden" class="form-control" name="hiddenspecbalance[]" id="hiddenspecbalance" readonly></td>
            <td></td>
            <td><input type="hidden" class="form-control" name="hiddenaccbalance[]" id="hiddenaccbalance" readonly></td>
        </tr>
        </tbody>
    </table>

 </div>

现在我有了这个脚本

<script>

    $('#feetype').change(function(){
        var selected = $(this).val();
        var stud_id = $('#stud_id').val();

         $.ajax({
         type:'GET',
         data:{selected:selected, stud_id:stud_id},
         url:'getspecificbalance.php',
         success:function(data)
         {
            $('#feebalance').val(data);
         } 

         });
        });

    var i=1;
    $('#add_input').click(function(){
        i++;



        $('#paymentdynamic').append('<tr id="row'+i+'"> <td><select class="form-control" name="feetype[]" id="feetype"> <option></option> <option>Tuition Fee</option> <option>Miscellaneous Fee</option> <option>Computer Fee</option> <option>Aircon Fee</option> <option>Book Fee</option>s </select></td> <td><input type="text" class="form-control" name="feeamount[]" id="feeamount" oninput="getBalance();"></td> <td><input type="text" class="form-control" name="feebalance[]" id="feebalance" readonly></td> <td><input type="text" class="form-control" name="accountbalance[]" id="accountbalance" readonly></td> <td><input type="hidden" class="form-control" name="hiddenspecbalance[]" id="hiddenspecbalance" readonly></td> <td><button type="button" name="remove" id="'+i+'" class="btn btn-primary"> x </button></td> <td><input type="hidden" class="form-control" name="hiddenaccbalance[]" id="hiddenaccbalance" readonly></td> </tr>');
    });

    $(document).on('click', '.btn-primary', function(){
        var button_id = $(this).attr("id");
        $('#row'+button_id+'').remove();
    }); 
</script>

这是我在ajax中的getspecificbalance.php的PHP代码。

<?php
include '../../connect.php';

if(isset($_GET['stud_id'], $_GET['selected']))
    {                          
     $feetype = $_GET['selected'];
     $stud_id = $_GET['stud_id'];
     $sql = "SELECT * FROM tbl_account_management WHERE stud_id='$stud_id' AND transac_description='$feetype' ORDER BY transaction_id DESC LIMIT 1";
     $result = mysqli_query($con, $sql);
     while($row = mysqli_fetch_assoc($result)) {

     $tuition_fee = $row['tuition_fee'];
     $misc_fee = $row['misc_fee'];
     $comp_fee = $row['comp_fee'];
     $aircon_fee = $row['aircon_fee'];
     $book_fee = $row['book_fee'];
     }


     if ($feetype == 'Tuition Fee')
     {
         echo $tuition_fee;
     }
     else if ($feetype == 'Miscellaneous Fee')
     {
         echo $misc_fee;
     }
     else if ($feetype == 'Computer Fee')
     {
         echo $comp_fee;
     }
     else if ($feetype == 'Aircon Fee')
     {
         echo $aircon_fee;
     }
     else if ($feetype == 'Book Fee')
     {
         echo $book_fee;
     }
     else 
     {
         echo 0;
     }

}
?>

我的问题是这个。 onchange函数仅适用于已在主php页面中编码的字段。当我添加动态字段时,带有更改功能的新下拉菜单不再起作用,并且不再显示费用余额中的任何余额。

表格如下:

The form image

0 个答案:

没有答案