如何在附加表行时调用 ajax

How do i call ajax while appending the table row?

本文关键字：调用 ajax 更新时间：2023-09-26

我有一个静态一行的表格，并有用于添加尽可能多的行的按钮。但是问题出在静态行中，我可以使用div id轻松调用ajax函数，但我无法在附加行中调用ajax。我该如何解决这个问题？下面是将行附加到表中的代码

jQuery(function(){
        var counter = 1;
        var count = 0;
        jQuery('a.add-row').click(function(event){
            event.preventDefault();
            counter++;
            count++;
            var newRow = jQuery('<tr><td><label type="text" />'+ counter +'</td><td><select name="client_name[]" class="client_id" ><option value="">Select Client Name</option><?php  foreach ($client as $client_name) {
                    echo '<option value="' . $client_name->client_id. '">' . $client_name->client_name . '</option>';
                }?></select></td><td><select name="order_id[]" class="order_id"></select></td><td><input type="text"  name="item[]' +
                '"/></td><td><input type="text"  name="color[]' +
                '"/></td>' +
                '<td><input type="checkbox" name="knitting['+ count +'][]" value="0"></td>' +
                '<td><input type="checkbox" name="mending['+ count +'][]" value="1"></td>' +
                '<td><input type="checkbox" name="dyeing['+ count +'][]" value="2"></td>' +
                '<td><input type="checkbox" name="iron['+ count +'][]" value="3"></td>' +
                '<td><input type="checkbox" name="linking['+ count +'][]" value="4"></td>' +
                '<td><input type="checkbox" name="mending['+ count +'][]" value="5"></td>' +
                '<td><input type="checkbox" name="iron['+ count +'][]" value="6"></td>' +
                '<td><input type="checkbox" name="packing['+ count +'][]" value="7"></td>' +
                '<td><input type="checkbox" name="data['+ count +'][]" value="8"></td>' +
                '<td><input type="checkbox" name="chalan['+ count +'][]" value="9"></td></tr>');
            jQuery('table.data_table').append(newRow);
        });
    });

我的 ajax 代码是：

$(".client_id").on('change', function (e) {
            e.preventDefault();
            var client_id = $(this).val();
            $.ajax({
                url: '<?php echo base_url('followUp_controller/getOrder_byClient'); ?>',
                type: 'POST',
                data: 'client_id=' + client_id,
                dataType: 'json',
                success: function (response) {
                    //  console.log(response);
//                    console.log('group district');
                    var items = '<option value="">Select Order No</option>';
                    $.each(response, function (index, value) {
                        items += "<option value='" + value.order_id + "'>" + value.order_no+ "</option>";
                    });
                    $(".order_id").html(items);
                }
            });
        });

只需获取client_name的点击事件：

$(document).on('change', '.client_id', function(){
    // call ajax inside it
    $.ajax({
        url: "/form.php",
        type: "post",
        data: data
    });
});