我有一个使用 AJAX 动态填充数据的表。
我添加了一个编辑按钮，这样我就可以编辑数据。单击编辑按钮时，将出现一个模态，提交时，数据将被更新。第一次单击时工作正常。模态弹出并消失。但当我第二次单击编辑图标时，什么也没发生。
我尝试搜索并将函数放置在$（function（）{}下，但没有成功。

<table class="table table-striped table-bordered" id="TasksTable">
        <thead>
            <tr>
                <th scope="col">Task #</th>
                <th scope="col">Name</th>
                <th scope="col">Due Date</th>
                <th scope="col">Status</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody id="tableBody">

        </tbody>
    </table>


function showTables() {
        $.ajax({
            url: '<?php echo site_url() ?>TaskController/showTasks',
            method: 'POST',
            dataType: 'json',
            async: false,

            success: function(data) {

                var html = '';
                var i;

                if (data.length == 0) {
                    $('#TaskCount').html('<p class="text-warning text- 
center">Hooray! No tasks Left. Consider Taking a break OR Adding new 
Tasks</p>');
                }
                for (i = 0; i < data.length; i++) {
                    html += '<tr>' +
                        '<td>' + (i + 1) + '</td>' +
                        '<td>' + data[i].task_name + '</td>' +
                        '<td>' + data[i].task_date + '</td>' +
                        '<td>' + data[i].task_status + '</td>' +
                        '<td><div class="custom-control custom-checkbox d- 
inline pr-3"><input type="checkbox" name="chkboxes" class="custom-control- 
input" data="' + data[i].task_id + '" id="customCheck' + data[i].task_id + 
'"><label class="custom-control-label" for="customCheck' + data[i].task_id 
+ '"></label></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img 
class="editicon" data="' + data[i].task_id + '" src="<?php echo base_url() 
?>images/edit.png" width="17px;" style="vertical-align: unset;"></td>' +
                        '</tr>';

                }

                $('#tableBody').html(html);
            },

            error: function() {
                console.log("Error Fetching Data");
            }
        });
    }


$(function() {
        showTables();

        // $('#tableBody').on('click','.editicon', function() {
            $('.editicon').on('click', function() {
            console.log('click');
            // Display Form to update form and update data
            var taskId = $(this).attr('data');
            console.log(taskId);

            $('#editTaskModal').modal('show');
            $.ajax({
                url: '<?php echo base_url()? 
>TaskController/fetchTaskByID',
                method: 'POST',
                data: {
                    taskId: taskId
                },
                dataType: 'json',
                async: false,

                success: function(data) {
                    $('#editTaskID').val(taskId);
                    $('#editTaskName').val(data[0].task_name);
                    $('#editTaskDate').val(data[0].task_date);
                },

                error: function() {
                    console.log('Can\'t update status');
                }
            });

        });
    });

    $('#editTaskForm').on('submit', function(e) {
        e.preventDefault();
        var taskID = $('#editTaskID').val();
        var taskName = $('#editTaskName').val();
        var taskDate = $('#editTaskDate').val();

        $.ajax({
            url: '<?php echo site_url() ?>TaskController/UpdateTask',
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            dataType: 'json',
            async: false,

            success: function(data) {
                $('#editTaskModal').modal('hide');
                $('#editTaskForm')[0].reset();
                showTables();
            },

            error: function() {
                alert('Error');
            }
        })
    });