Javascript 重新加载Ajax后，DataTable中的按钮无法单击

我有一个数据表，每行有两个按钮“取消”和“更新”。 当页面开始加载时，我可以同时单击“取消”和“更新”按钮。但在调用ajax并将行添加到数据表中之后，我无法单击“取消”和“更新”。下面的屏幕截图是我调用ajax并尝试单击“更新”按钮后的结果

import$from'jquery'；
导入“jqueryui”；
导入“语义ui sass”；
导入“datatables.net se”；
从“/helper”导入{initReportDateTime，generateCSV}；
从“力矩”中导入力矩；
//路由
const routes=require（'../../../public/js/fos_js_routes.json'）；
从“../../../vendor/friendsofsymfony/jsrouting bundle/Resources/public/js/router.js”导入路由；
从“./utility/api”导入{cancelBooking}；
路由。设置路由数据（路由）；
//字典变量供以后使用
让csvData；
设totalNumOfDays=0；
假设totalNumOfSales=0；
$（文档）.ready（函数（）{
让postData={
startDate:null，
endDate:null，
公司：空
}
绘图表（postData）；
initReportDateTime（“reportDateRange”）；
$（“#下载CSV”）。单击（函数（事件）{
event.preventDefault（）；
if（csvData！==null&&csvData！==''）{
generateCSV（csvData，“销售报告”，totalNumOfSales.toFixed（2），totalNumOfDays）；
}
});
$（“#报告表格”）。提交（功能（事件）{
event.preventDefault（）；
设dateRange=$（“#reportDateRange”）.val（）；
let companys=$（“#报告公司”）.val（）；
let status=$（“#报告_status”）.val（）；
让splitDate=dateRange.split（“”）；
设startDate=splitDate[0]；
设endDate=splitDate[2]；
调试器；
postData={
开始日期：开始日期，
endDate:endDate，
公司:公司,，
状态：状态
}
$（'#salesTable'）.DataTable（）.destroy（）；
//重绘表格
绘图表（postData）；
})
$（“#删除原因”）。在（'keypress'，函数（）{
（$（this.val（）！=“”）？
$（this）.parent（）.removeClass（'error'）：null；
})
});
导出默认函数drawTable（postdata）{
让salesTable=$（'#salesTable'）。数据表（{
“分页”：正确，
“排序”：正确，
“信息”：错误，
“响应”：正确，
“语言”：{
“emptyTable”：“表中没有可用数据”
},
“columnDefs”：[{
“目标”：-1，
“数据”：空，
“defaultContent”：“CancelUpdate”
} ],
“ajax”：{
“url”：Routing.generate（'generate_report'），
“类型”：“职位”，
“处理”：对，
“数据”：{
startDate:postdata.startDate，
endDate:postdata.endDate，
公司：postdata.companys，
状态：postdata.status
},
“语言”：{
“加载记录”：“，
“正在处理”：“正在加载”
},
成功：功能（数据）{
//保存在全局字典中
csvData=数据；
//重置总天数
totalNumOfDays=0；
//重置总销售额
totalNumOfSales=0；
如果（数据长度>0）{
data.map（res=>{
//设置fromDate的datetime格式
让状态自由；
如果（res.status==‘已接收’）{
statusDom=`${res.status}`；
}否则如果（res.status==“已确认”）{
statusDom=`${res.status}`；
}否则{
statusDom=`${res.status}`；
}
让startDate=力矩（res.fromDate）；
设endDate=力矩（res.toDate）；
设dateDiff=endDate.diff（startDate，'days'）；
totalNumOfDays=totalNumOfDays+dateDiff；
let buttons=`Delete

`;
totalNumOfSales=totalNumOfSales+res.totalAmt；
//更新
salesTable.row.add([
`${res.customer.firstName}${res.customer.lastName}`，
res.company.name，
res.refId，
身份，
res.fromDate，
托达特博士，
dateDiff，
res.车辆类型，
目的，
res.totalAmt，
赔偿范围
]).抽签（假）；
})
$（“#totalNumOfDays”）.html（totalNumOfDays）；
$（“#totalnumosales”）.html（totalnumosales.toFixed（2））；
}否则{
$（“.dataTables_empty”）.css（'text-align'，'center'）；
$（“.dataTables_empty”）.html（“表中没有可用数据”）；
$（“#totalNumOfDays”）.html（0）；
$（#totalNumOfSales”）.html（0）；
}
}
}
} );
//取消预订
$（#salesTable tbody'）。在（'click'，'cancelBooking'，函数（）{
让data=salesTable.row（$（this.parents（'tr'））.data（）；
设refId=数据[2]；
$（“.refId”）.html（refId）；
$（'.coupled.modal'）.modal({
allowMultiple:false
import $ from 'jquery';
import 'jquery-ui';
import 'semantic-ui-sass';
import 'datatables.net-se';
import {initReportDateTime, generateCSV} from "./helper";
import moment from 'moment';

//routing
const routes = require('../../../public/js/fos_js_routes.json');
import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js';
import {cancelBooking} from "../utility/api";

Routing.setRoutingData(routes);


//dictionary variable for later use
let csvData ;
let totalNumOfDays =0;
let totalNumOfSales =0;

$(document).ready(function(){

    let postData = {
        startDate: null,
        endDate  : null,
        companies: null
    }

    drawTable(postData);

    initReportDateTime("#reportDateRange");

    $("#downloadCsv").click(function(event){
        event.preventDefault();
        if (csvData !== null && csvData !==''){
            generateCSV(csvData,"Sales_Report",totalNumOfSales.toFixed(2),totalNumOfDays);
        }
    });

    $("#report_form").submit(function(event){
        event.preventDefault();
        let dateRange = $("#reportDateRange").val();
        let companies = $("#report_company").val();
        let status = $("#report_status").val();
        let splitDate = dateRange.split(" ");

        let startDate   = splitDate[0];
        let endDate     = splitDate[2];

        debugger;

        postData = {
            startDate: startDate,
            endDate  : endDate,
            companies: companies,
            status   : status
        }

        $('#salesTable').DataTable().destroy();

        //redraw table
        drawTable(postData);
    })

    $("#deleteReason").on('keypress',function () {
        ( $(this).val()  !== '') ?
            $(this).parent().removeClass('error') : null;

    })
});

export default function drawTable(postdata){
        let salesTable =$('#salesTable').DataTable( {
            "paging":   true,
            "ordering": true,
            "info":     false,
            "responsive": true,
            "language": {
                "emptyTable": "No data available in table"
            },
            "columnDefs": [ {
                "targets": -1,
                "data": null,
                "defaultContent": "<button id='cancelBooking' class='ui fluid red button cancelBooking'>Cancel</button><button id='updateBooking' class='ui fluid teal button updateBooking'>Update</button>"
            } ],
            "ajax": {
                "url": Routing.generate('generate_report'),
                "type": "POST",
                "processing":true,
                "data": {
                    startDate: postdata.startDate,
                    endDate: postdata.endDate,
                    companies: postdata.companies,
                    status : postdata.status
                },
                'language': {
                    'loadingRecords': '&nbsp;',
                    'processing': '<div class="ui text loader">Loading</div>'
                },
                success:function(data){
                    //save in global dictionary
                    csvData = data;

                    //reset totalNumOfDays
                    totalNumOfDays =0;

                    //reset totalNumOfSales
                    totalNumOfSales=0;

                    if (data.length> 0){
                        data.map(res => {
                            //format datetime for fromDate
                            let statusDom;

                            if(res.status === 'Received'){
                                statusDom = `<div class="ui" data-position="top left" data-tooltip="Customer haven't yet, but already generate quotation."><a class="ui yellow label">${res.status}</a></div>`;
                            }else if(res.status === 'Confirmed'){
                                statusDom = `<div class="ui" data-position="top left" data-tooltip="Customer already make payment."><a class="ui green label">${res.status}</a></div>`;
                            }else {
                                statusDom = `<div class="ui" data-position="top left" data-tooltip="Partner or admin cancel the booking"><a class="ui red label">${res.status}</a></div>`;
                            }

                            let startDate = moment(res.fromDate);
                            let endDate   = moment(res.toDate);

                            let dateDiff = endDate.diff(startDate,'days');
                            totalNumOfDays  = totalNumOfDays+dateDiff;

                            let buttons    = `<button class="ui fluid red button" value="${res.refId}" onclick="showDeleteModal()">Delete</button> <br/>
                                             `;
                            totalNumOfSales = totalNumOfSales +  res.totalAmt;

                        //<button class="ui fluid teal button"  value="${res.refId}">Update</button>

                            salesTable.row.add([
                                `${res.customer.firstName} ${res.customer.lastName}`,
                                res.company.name,
                                res.refId,
                                statusDom,
                                res.fromDate,
                                res.toDate,
                                dateDiff,
                                res.vehicleType,
                                res.purpose,
                                res.totalAmt,
                                res.coverAmt
                            ]).draw(false);
                        })


                        $("#totalNumOfDays").html(totalNumOfDays);
                        $("#totalNumOfSales").html(totalNumOfSales.toFixed(2));
                    } else {
                        $(".dataTables_empty").css('text-align','center');
                        $(".dataTables_empty").html('No data available in table');
                        $("#totalNumOfDays").html(0);
                        $("#totalNumOfSales").html(0);
                    }
                }
            }
        } );

    //cancel booking
    $('#salesTable tbody').on( 'click', '.cancelBooking', function () {
        let data = salesTable.row( $(this).parents('tr') ).data();
        let refId   = data[ 2 ];

        $(".refId").html(refId);

        $('.coupled.modal').modal({
                allowMultiple: false
            });

        $('.first.modal').modal({
            'onApprove' : function (event) {

               // salesTable.ajax.reload();

                let reason = $("#deleteReason").val();

                if (reason ==="") {
                    $("#deleteForm>div").addClass('error');
                    $("#deleteForm").next().removeClass('hide');

                    //still open
                    $('.first.modal').modal('show');
                    return false;

                }


                //cancel booking via api
                cancelBooking(refId,reason).then(response => {

                    if (response.status === 400){
                        $("#secondModelHeader").html("Error");
                        $("#secondModelContent").html(response.data);

                    }
                    if (response.status ===201) {
                        $("#secondModelHeader").html("Success");
                        $("#secondModelContent").html(response.data.cancelMessage);
                    }

                    $('.second.modal').modal({
                        'onApprove': function (){
                            location.reload();
                        }
                    }).modal('show');
                });



            }
        }).modal('show')


    } );

    $('#salesTable tbody').on( 'click', '.updateBooking', function () {
        let data = salesTable.row( $(this).parents('tr') ).data();
        let refId   = data[ 2 ];

        let updateBooking  =  Routing.generate('update_booking');
        window.location.href = `${updateBooking}/${refId}`;

    } );


    return salesTable
}

$('#salesTable tbody').on( 'click', '#cancelBooking', function () {

$('#salesTable tbody').on( 'click', '#updateBooking', function () {

import $ from 'jquery';
import 'jquery-ui';
import 'semantic-ui-sass';
import 'datatables.net-se';
import {initReportDateTime, generateCSV} from "./helper";
import moment from 'moment';

//routing
const routes = require('../../../public/js/fos_js_routes.json');
import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js';
import {cancelBooking} from "../utility/api";

Routing.setRoutingData(routes);


//dictionary variable for later use
let csvData ;
let totalNumOfDays =0;
let totalNumOfSales =0;
let salesTable;

$(document).ready(function(){

    let postData = {
        startDate: null,
        endDate  : null,
        companies: null
    }

    drawTable(postData);

    initReportDateTime("#reportDateRange");

    $("#downloadCsv").click(function(event){
        event.preventDefault();
        if (csvData !== null && csvData !==''){
            generateCSV(csvData,"Sales_Report",totalNumOfSales.toFixed(2),totalNumOfDays);
        }
    });

    $("#report_form").submit(function(event){
        event.preventDefault();
        let dateRange = $("#reportDateRange").val();
        let companies = $("#report_company").val();
        let status = $("#report_status").val();
        let splitDate = dateRange.split(" ");

        let startDate   = splitDate[0];
        let endDate     = splitDate[2];

        postData = {
            startDate: startDate,
            endDate  : endDate,
            companies: companies,
            status   : status
        }

        $('#salesTable').DataTable().destroy();


        //redraw table
        drawTable(postData);
    })

    $("#deleteReason").on('keypress',function () {
        ( $(this).val()  !== '') ?
            $(this).parent().removeClass('error') : null;

    })
});

export default function drawTable(postdata){
         salesTable =$('#salesTable').DataTable( {
            "paging":   true,
            "ordering": true,
            "info":     false,
            "responsive": true,
            "language": {
                "emptyTable": "No data available in table"
            },
            "columnDefs": [ {
                "targets": -1,
               // "data": null,
                "defaultContent": "<button id='cancelBooking' class='ui fluid red button cancelBooking'>Cancel</button><button id='updateBooking' class='ui fluid teal button updateBooking'>Update</button>"
            } ],
            "ajax": {
                "url": Routing.generate('generate_report'),
                "type": "POST",
                "processing":true,
                "data": {
                    startDate: postdata.startDate,
                    endDate: postdata.endDate,
                    companies: postdata.companies,
                    status : postdata.status
                },
                'language': {
                    'loadingRecords': '&nbsp;',
                    'processing': '<div class="ui text loader">Loading</div>'
                },
                success:function(data){
                    //save in global dictionary
                    csvData = data;

                    //reset totalNumOfDays
                    totalNumOfDays =0;

                    //reset totalNumOfSales
                    totalNumOfSales=0;

                    if (data.length> 0){
                        data.map(res => {
                            //format datetime for fromDate
                            let statusDom;

                            if(res.status === 'Received'){
                                statusDom = `<div class="ui" data-position="top left" data-tooltip="Customer haven't yet, but already generate quotation."><a class="ui yellow label">${res.status}</a></div>`;
                            }else if(res.status === 'Confirmed'){
                                statusDom = `<div class="ui" data-position="top left" data-tooltip="Customer already make payment."><a class="ui green label">${res.status}</a></div>`;
                            }else {
                                statusDom = `<div class="ui" data-position="top left" data-tooltip="Partner or admin cancel the booking"><a class="ui red label">${res.status}</a></div>`;
                            }

                            let startDate = moment(res.fromDate);
                            let endDate   = moment(res.toDate);

                            let dateDiff = endDate.diff(startDate,'days');
                            totalNumOfDays  = totalNumOfDays+dateDiff;

                            let buttons    = `<button class="ui fluid red button" value="${res.refId}" onclick="showDeleteModal()">Delete</button> <br/>
                                             `;
                            totalNumOfSales = totalNumOfSales +  res.totalAmt;

                        //<button class="ui fluid teal button"  value="${res.refId}">Update</button>

                            salesTable.row.add([
                                `${res.customer.firstName} ${res.customer.lastName}`,
                                res.company.name,
                                res.refId,
                                statusDom,
                                res.fromDate,
                                res.toDate,
                                dateDiff,
                                res.vehicleType,
                                res.purpose,
                                res.totalAmt,
                                res.coverAmt
                            ]).draw();
                        })


                        $("#totalNumOfDays").html(totalNumOfDays);
                        $("#totalNumOfSales").html(totalNumOfSales.toFixed(2));
                    } else {
                        $(".dataTables_empty").css('text-align','center');
                        $(".dataTables_empty").html('No data available in table');
                        $("#totalNumOfDays").html(0);
                        $("#totalNumOfSales").html(0);
                    }
                }
            }
        } );

    //cancel booking
    $('#salesTable tbody').on( 'click', '.cancelBooking', function () {
        let data = salesTable.row( $(this).parents('tr') ).data();
        let refId   = data[ 2 ];

        $(".refId").html(refId);

        $('.coupled.modal').modal({
                allowMultiple: false
            });

        $('.first.modal').modal({
            'onApprove' : function (event) {

               // salesTable.ajax.reload();

                let reason = $("#deleteReason").val();

                if (reason ==="") {
                    $("#deleteForm>div").addClass('error');
                    $("#deleteForm").next().removeClass('hide');

                    //still open
                    $('.first.modal').modal('show');
                    return false;

                }


                //cancel booking via api
                cancelBooking(refId,reason).then(response => {

                    if (response.status === 400){
                        $("#secondModelHeader").html("Error");
                        $("#secondModelContent").html(response.data);

                    }
                    if (response.status ===201) {
                        $("#secondModelHeader").html("Success");
                        $("#secondModelContent").html(response.data.cancelMessage);
                    }

                    $('.second.modal').modal({
                        'onApprove': function (){
                            location.reload();
                        }
                    }).modal('show');
                });



            }
        }).modal('show')


    } );

    $('#salesTable tbody').on( 'click', '.updateBooking', function () {
        let data = salesTable.row( $(this).parents('tr') ).data();
        let refId   = data[ 2 ];

        let updateBooking  =  Routing.generate('update_booking');
        window.location.href = `${updateBooking}/${refId}`;

    } );


    return salesTable
}