События jQuery DataTable не запускаются

Question

У меня есть данные, которые я динамически инициализирую через вызов ajax, и я прикрепил событие click к зависанию ячейки таблицы (td), когда я пытаюсь щелкнуть по ячейке, я не получаю событие click, запускаемое, мне интересноЧто может быть причиной.Вот фрагмент

let table = $('#data-table').DataTable();


$(document).ready(function()
{
    

    $("#data-table tbody").on("click", "td", function ()
    {
        console.log('Datatable was clicked')
    });


});

window.onload = function()
{
    table = $('#data-table').DataTable({
            destroy: true,
            responsive: true,
            serverSide: false,
            autoWidth: false,
            paging: true,
            filter: true,
            searching: true,
            stateSave: true,
            scrollX: true,
            lengthMenu: [5,10, 25, 50, 75, 100],
            ajax: {
                url: 'https://jsonplaceholder.typicode.com/todos',
                type: 'GET',
                dataSrc: ''
            },
            columns: [
                {
                    title: 'User Id',
                    data: 'userId',
                },
                {
                    title: 'Id',
                    data: 'id',
                },
                {
                    title: 'Title',
                    data: 'title',
                }
              ]
    });
    
 }

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<table id="data-table" data-order='[[1,"asc"]]' class="table table-bordered table-hover">
      <thead>
          <tr class="primary">
              <th>User Id</th>
              <th>Id</th>
              <th>Title</th>
          </tr>
      </thead>
      <tbody></tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> </script>

Answer 1

Есть ряд проблем, которые на самом деле сводятся к опечаткам и плохому синтаксису.Основным преимуществом этого является использование консоли браузера (она буквально сообщает вам, в чем проблема).

Вот исправленная версия.Обратите внимание, что я вручную добавил строку td с, так как ваш прослушиватель событий прослушивает щелчки на tbody>td, и пока нет ни одного, пока ajax не вернет некоторые (чего не будет в фрагменте)

let table;

$(function(){

    $("#data-table tbody").on("click", "td", function(){
        console.log('Datatable was clicked')
    });

    table = $('#data-table').DataTable({
        destroy: true,
        responsive: true,
        serverSide: false,
        autoWidth: false,
        paging: true,
        filter: true,
        searching: true,
        stateSave: true,
        scrollX: true,
        lengthMenu: [5,10, 25, 50, 75, 100],
        ajax: {
            url: 'https://jsonplaceholder.typicode.com/todos',
            type: 'GET',
            dataSrc: ''
        },
        columns: [
            {
                title: 'Zone',
                data: 'LastKnownZone',
            },
            {
                title: 'Hiérarchie Map',
                data: 'MapInfo.mapHierarchyString',
            },
            {
                title: 'Addresse MAC',
                data: 'macAddress',
            }
          ]
     });

});

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<table id="data-table" data-order='[[1,"asc"]]' class="table table-bordered table-hover">
      <thead>
          <tr class="primary">
              <th>Zone</th>
              <th>Hiérarchie Map</th>
              <th>Addresse MAC</th>
          </tr>
      </thead>
      <tbody><tr class="fordemopurposes">
              <td>1</td>
              <td>2</td>
              <td>3</td>
          </tr></tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> </script>