Question

我将DataTable用于通过Ajax调用填充的表。一些列是数据库中的数据，但在最后一列中，我放置了一些按钮。当我单击该按钮时，click事件未触发，为什么？

我尝试委派该事件，但仅是第一次触发（我单击的第一个按钮，随后的单击均未单击）：

$( '#my_table' ).DataTable( {
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/Italian.json'
            },
            ajax: {
                url: ccwhatsapp_ajax.url + '?action=get_users_for_datatable'
            },
            responsive: true,
            dom: 'Bfrtip',
            columns: [
                { data: 'full_name' },
                { data: 'login_email' },
                { data: 'phone' },
                { data: 'info' },
                { data: 'actions' }
            ],
            columnDefs: [
                { width: '20%', targets: [0, 1, 2, 3] },
            ]
        } );

$( '#my_table' ).on( 'click', 'tbody tr td button.btn', function () {
                console.log("Click on a button!");
            } );

            $( "#my_table" ).delegate( "tbody tr td button.btn", "click", function() {
                console.log("Click on a button!");
            });

            $( '.btn-primary' ).on( 'click', function () {
                console.log("Click on a button!");
            } );

怎么了？

Answer 1

尝试将侦听器更改为：

$( '#my_table tbody' ).on( 'click', 'tr td button.btn', function () {
            console.log("Click on a button!");
} );

在DataTables网站here上有一个示例。

Answer 2

我使用表的div“祖先/上升点”解决了

$( '#table_container table' ).on( 'click', 'button.btn', function () {
    console.log($(this));
} );

为什么“单击”事件不触发动态添加到表中的按钮？

2 个答案: