jquery on（ 'click'）がデータテーブルを呼び出す新しい方法ではもはや機能しません

Question

私は動的列作成をしたいので、データテーブルの作成方法を変更します。私のデータテーブルには、詳細を開示する列があります。私はこの呼び出し

$(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); 
       }); 
      } 


     }); 
    } 
}); 

問題にデータテーブルを呼び出す方法を変更したので、クリックに登録

// 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'); 
       } 
      }); 



     }); 

とともに

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); 
       }); 
      } 
     }); 

は、クリックが上でもはや検出されませんでデータ表。これはどのように可能ですか？

Answer 1

したがって、リスナーがテーブルに接続されていないようです。お試しください

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