时间戳

首页 > 解决方案 > jQuery DataTable 事件未触发

javascript - jQuery DataTable 事件未触发

问题描述

我有一个数据表，我通过 ajax 的调用动态初始化，并且我在表格单元格（td）上附加了点击事件，当我尝试点击单元格时，我没有触发点击事件，我想知道可能是什么原因。这是片段

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>

标签： javascriptdatatables

解决方案

有许多问题实际上归结为拼写错误和语法错误。主要的收获是使用浏览器的控制台（它会告诉你问题出在哪里）。

这是一个清理后的版本。请注意，我已经手动添加了一行tds ，因为您的事件侦听器正在侦听点击，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>

推荐阅读