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

Question

使用 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, XMLHttpRequest, textStatus, 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, type, 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, textStatus, 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);
    },
    error: function(jqXHR, XMLHttpRequest, textStatus, errorThrown) {
        custom_err(jqXHR, XMLHttpRequest, textStatus, 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)
    })

标签： jqueryonclickdatatables-1.10