Datatables jQuery 事件在第二页上工作，而不是在其余页面上工作

Question

我制作了以下 jQuery 事件，当您在第二页面上分页时，该事件实际上有效。

但是它不会在第三个和其余页面上触发，没有console.log错误。

问题显然在于 DataTable initComplete 参数上的 DOM 重建，我猜这些参数仅应用于第一个结果数据表，这就是为什么它只在第二个结果页面上调用我的 status_icons() 函数，而不是其余的。

我的全局函数，在点击事件时触发DataTable的分页

function status_icons() {

    $('table tr').each(function() {
        if ($(this).find('td').eq(0).text() == '1') {
            $(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-check-circle-o datatable-paid-1" aria-hidden="true"></i>');
            $(this).find('.btn-success').eq(0).prop("disabled", true);
            $(this).find('.btn-success').eq(0).text('Paid'); 
        } else {
            $(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-exclamation-circle datatable-paid-0" aria-hidden="true"></i>');
        }
    });
}

这就是我构建数据表的方式，为第一个结果页面和其余页面调用上面的函数

setTimeout(function() {
    $('#invoices-table').DataTable({
        responsive: true,
        columnDefs: [{ orderable: false, targets: [-1, -2, -3] }],
        "lengthMenu": [
            [100, 5, 25, 50, -1],
            [100, 5, 25, 50, "All"]
        ],
        dom: 'Bfrtip',  

        initComplete: function() {
            status_icons() // it executes my function for the first page of results
            var api = this.api();
            // some irrelevant code that uses api and does not cause my issue
            // ...

            $('.paginate_button').on('click', function() {
                status_icons(); // it executes for the second page but not for the rest
            });

        }
    });
}, 3000);

使用

https://cdn.datatables.net/1.10.10/js/jquery.dataTables.js

Answer 1

那些分页按钮被重新绘制...
所以将它们视为“动态”。

这里需要事件“委托”。

使用

$(document).on('click','.paginate_button', function() {

从静态元素开始查找，该静态元素会将事件委托给其实际匹配的子元素。

代码笔 ;)

Answer 2

使用

drawCallback

功能代替

initComplete

。它解决了我的问题。