javascript - jquery 开启。 ('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....