为何我的JavaScript DataTable中onClick事件出现异常？

让我来帮你捋捋这个DataTable按钮点击事件的问题，结合你给出的代码片段，我整理了几个最可能的原因和对应的解决办法：

1. 事件绑定时机或方式不对 #

你当前把#btnSelectedRows的点击事件绑定写在了$(document).ready()外面，如果这个按钮是动态生成的（比如随DataTable渲染才出现，或是页面加载后通过JS添加到DOM的），直接绑定click事件会失效——因为绑定代码执行时，按钮元素还不存在于DOM中。

另外，如果按钮是静态存在的，但绑定代码在DOM加载完成前就执行了，也会导致事件绑定失败。

解决办法： #

• 把点击事件绑定代码移到$(document).ready()内部，确保DOM加载完成后再绑定：

$(document).ready(function () {
  if (init == 0) {
    table = $('#example').DataTable({
      columnDefs: [
        { orderable: false, className: 'select-checkbox', targets: 0 },
        { "targets": [2], "visible": false, "searchable": false }
      ],
      select: { style: 'os', selector: 'td:first-child' },
      order: [ [1, 'asc'] ]
    });
    init = 1;
  }

  // 把点击事件绑定移到这里
  $('#btnSelectedRows').on('click', function () {
    alert('here');
    var tblData = table.rows({ selected: true }).data(); // 补全正确的API调用
    // 后续处理逻辑
  });
})

• 如果按钮是动态生成的，改用事件委托的方式绑定：

$(document).on('click', '#btnSelectedRows', function () {
  alert('here');
  if (typeof table !== 'undefined') { // 先检查table是否已初始化
    var tblData = table.rows({ selected: true }).data();
    // 后续处理逻辑
  }
});

2. 全局变量table的作用域或初始化问题 #

你把table定义为全局变量，但如果init的判断逻辑出现问题（比如init没有被正确设为1，或是页面刷新后init重置但table初始化失败），会导致table变量为undefined，此时在点击事件里调用table.rows()会抛出错误，甚至可能阻止后续代码执行（你的alert在最前面，大概率会弹出，但后面的代码会报错中断）。

解决办法： #

• 在点击事件里先检查table是否已正确初始化：

$('#btnSelectedRows').on('click', function () {
  alert('here');
  if (!table) {
    alert('DataTable尚未初始化！');
    return;
  }
  var tblData = table.rows({ selected: true }).data();
  // 后续处理逻辑
});

• 若没有特殊的重复初始化需求，直接去掉init变量的判断，在$(document).ready()里初始化DataTable：

$(document).ready(function () {
  table = $('#example').DataTable({
    // 配置项保持不变
  });

  // 绑定点击事件
  $('#btnSelectedRows').on('click', function () {
    // ...你的处理逻辑
  });
})

3. DataTable API调用错误 #

你的代码里table.ro...是未写完的API调用，比如应该是table.rows()，如果写错了方法名（比如写成table.rowss()），会抛出Uncaught TypeError，导致后续代码无法执行。

解决办法： #

• 确保使用正确的DataTable API，比如获取选中行数据的标准写法是：

var selectedRows = table.rows({ selected: true }).data();
// 遍历选中行数据
selectedRows.each(function(rowData) {
  console.log(rowData);
});

最后一步：查看浏览器控制台错误 #

不管是什么原因，先打开浏览器的开发者工具（F12），切换到Console标签页，点击按钮后看是否有报错信息——错误信息会直接告诉你问题出在哪一行、是什么类型的错误，这是最快定位问题的方式。

内容的提问来源于stack exchange，提问作者bshah