jQuery 数据表事件未触发

Question

I have a datatable that i dynamically initialise thru ajax's call and i have attached the click event on the table cell(td) hover when i try to click the cell i don't get the click event being fired, i am wondering what could be the cause. Here is the snippet

 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

There are a number of issues that really just boil down to typo's and bad syntax. The main take-home from this is to use the browser's console (it literally tells you what the problem is).

Here's a cleaned up version. Note that I've manually added a row of td s since your event listener is listening for clicks on tbody>td and there are none until and unless the ajax returns some (which it won't in a snippet)

 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>