jQuery 數據表事件未觸發

Question

我有一個數據表，我通過 ajax 的調用動態初始化，並且我在表格單元格（td）hover 上附加了點擊事件，當我嘗試點擊單元格時，我沒有觸發點擊事件，我想知道可能是什么原因。 這是片段

 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>