jQuery on。（'click'）不再适用于调用数据表的新方法

Question

我更改了创建数据表的方式，因为我想进行动态列创建。 我的数据表的一列中提供了详细信息。

function format (d) {
       console.log(d);
       var output = '' ;
       $.each(d, function(i, val) {
           output += '<tr><td>' + i + '</td>' + '<td>' + val + '</td>' + '</tr>';
       });
       console.log(output);

       // `d` is the original data object for the row
       return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + output + '</table>';
    }

    var dataIndex = new Array() ;

    $(document).ready(function() {

        var table = $('#mainDataTable').DataTable( {
            "ajax": "getData.php",
                "columns": [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { "data": "creationTimestamp", "render": function (data) {
                    var date = new Date(data*1000);
                    var month = date.getMonth() + 1;
                    var hours = date.getHours();
                    var minutes = "0" + date.getMinutes();
                    var seconds = "0" + date.getSeconds();

                    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);

                    return    date.getFullYear() + "-"  + (month.length > 1 ? month : "0" + month) +"-"+ (date.getDate().length > 1 ? date.getDate() :  date.getDate()) + ' ' + formattedTime;
                } },
                { "data": "evt-event" },
                { "data": "evt-app" }
            ],
            "order": [[1, 'desc']],
             "iDisplayLength": 100,
            "createdRow": function( row, data, dataIndex ) {
                $.each(data, function(i, val) {
                    dataIndex[i] = 1;
                    //console.log(i);
                });
            }
        });

随点击注册

// Add event listener for opening and closing details
            $('#mainDataTable tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row( tr );


                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child( format(row.data())).show();
                    tr.addClass('shown');
                }
            });



        });

由于我将调用数据表的方式更改为此调用

$(document).ready(function() {
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'getData.php',

    success: function(d) {
      var table =  $('#mainDataTable').DataTable({

            data: d.data,
            columns: d.columns,
             iDisplayLength : 100,
             order: [[1, 'desc']],
             createdRow: function( row, data, dataIndex ) {
                $.each(data, function(i, val) {
                    dataIndex[i] = 1;
                    console.log(i);
                });
            }


        });
    }
});

问题是在数据表上不再检测到点击。 这怎么可能 ？

Answer 1

因此，似乎监听器未附加到表上。 试试看

$(document).on('click', '#mainDataTable tr', function() { console....