Почему событие «click» не запускается для кнопок, динамически добавляемых в таблицу?

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

Я решил использовать div "предок / асцендент" таблицы:

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

Answer 2

Попробуйте изменить слушателя на:

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

Пример этого есть на веб-сайте DataTables здесь .