每次Jquery初始化函数触发时，都会触发dom元素click

问题描述

使用Jquery Datatable通过ajax检索数据。并且还可以使用带有该数据表的内联表编辑插件来初始化内联编辑功能。问题是一旦单击保存按钮以进行内联编辑进行更新，重新加载数据表以获取动态数据，当重新加载表时，我们再次触发内联编辑功能以获取表中的内联功能，否则内联功能不起作用在数据表中。内联表初始化之后，单击保存按钮，它将触发两次。每次初始化时，都会触发“保存”按钮单击事件。这是我的代码，

完成ajax后，初始化数据表，初始化内联表。

function purchase_payments_table(id) {
var i = 1;
pay_trans_table = $('#pay_trans_table').DataTable({
    searching: false,paging: false,info: false,ordering: false,processing: true,serverSide: true,"language": {
        "emptyTable": "No transaction for this bill"
    },// ajax: get_purchase_payments + '/' + id,"ajax": {
        "url": get_purchase_payments + '/' + id,dataSrc: function(data) {
            records_total = data.recordsTotal;
            return data.data;
        },complete: function() {
            init_tabeledit();
            i = 1;
            if (records_total != 0) {
                $('.tabledit-toolbar-column').css("display","table-cell");
                $('.tabledit-toolbar').css("display","block");
            } else {
                $('.tabledit-toolbar-column').css("display","none");
                $('.tabledit-toolbar').css("display","none");
            }
        },error: function(jqXHR,XMLHttpRequest,textStatus,errorThrown) {
            custom_err(jqXHR,errorThrown);
        }
    },columns: [{
            data: 'id',name: 'id',className: 'hide_column'
        },{
            render: function(data,type,row,Meta) {
                return Meta.row + Meta.settings._idisplayStart + 1;
            }
        },{
            data: 'created_at',name: 'created_at',render: function(data,row) {
                return moment(data).format('DD/MM/YYYY');
            }
        },{
            data: 'paid_amt',name: 'paid_amt'
        },{
            data: 'adj_amt',name: 'adj_amt'
        },],responsive: true,initComplete: function() {
        $("#pay_trans_table").show();
        // init_tabeledit();
    }
});}

内联表的功能

function init_tabeledit() {
$('#pay_trans_table').tabledit({
    url: update_purchase_payments,dataType: "json",columns: {
        identifier: [0,'id'],editable: [
            [3,'paid_amt'],[4,'adj_amt']
        ]
    },restoreButton: false,onSuccess: function(data,jqXHR) {
        console.log(data);
        if (data.action == 'edit') {
            $(".tabledit-delete-button").css("display","block");

            $('.tabledit-edit-button').each(function() {
                $(this).children("span").remove();
                $(this).append('<span class="glyphicon glyphicon-pencil"></span>');
            });
            // pay_trans_table.ajax.reload();
            // bills_table.ajax.reload();
            success_notify();
        }
        if (data.action == 'delete') {
            $('#' + data.id).remove();
            // pay_trans_table.ajax.reload();
            // bills_table.ajax.reload();
            danger_notify();
        }
        pay_trans_table.ajax.reload();
        bills_table.ajax.reload();
        var bill_id = $('#bill_id').val();
        fetchpaymnt_on_focout(bill_id);
    },errorThrown) {
        custom_err(jqXHR,errorThrown);
    }
});}

保存来自插件js的事件代码，

i.on("click","button.tabledit-save-button",function(e) {
        console.log('test');
        e.handled !== !0 && (e.preventDefault(),b.submit(t(this).parents("tr").find("td.tabledit-edit-mode")),e.handled = !0)
    })) : (i.on(d.eventType,"tr:not(.tabledit-deleted-row) td.tabledit-view-mode",function(t) {
        t.handled !== !0 && (t.preventDefault(),b.reset(i.find("td.tabledit-edit-mode")),u.edit(this),t.handled = !0)
    })

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）