如何为DataTable内的按钮添加点击函数？现有代码无法生效

你的点击事件失效主要有三个核心问题：

1. 选择器不匹配：你给按钮设置的是data-id="sertifikat-button"，但绑定事件时用了$('#sertifikat-button')——#是ID选择器，而你用的是自定义data属性，两者完全不匹配。
2. 动态元素事件绑定逻辑错误：DataTable的行是动态渲染生成的，直接给还未创建的元素绑定事件会失效，必须用事件委托才能捕获动态元素的事件。
3. 重复ID违规：表格有多行时，你给禁用按钮加的id="btn-sertifikat"会重复，HTML要求ID必须唯一，这会导致后续元素的ID完全失效。

修复步骤： #

1. 修改DataTable渲染代码

把按钮的标识改成class（避免重复ID），同时把需要的行数据（比如id_mahasiswa）存到data属性里，方便后续直接获取：

{ 
  data: 'kode_sertifikat',
  render: function ( data, type, row ) {
    // 可用按钮：用class标识，同时存储当前行的id_mahasiswa到data属性
    if (row.dapat_sertifikat == 1) {
      return `<button type="button" class="btn btn-primary sertifikat-button" data-mahasiswa-id="${row.id_mahasiswa}">${data}</button>`;
    } 
    // 禁用按钮：去掉重复ID，仅保留样式类
    else {
      return `<button type="button" class="btn btn-warning disabled">${data}</button>`;
    }
  }
},

2. 修改事件绑定代码

用事件委托绑定到页面中已存在的父元素（比如DataTable的容器，或者直接用document），确保动态生成的按钮能触发事件：

// 委托到document，捕获所有动态生成的.sertifikat-button按钮的点击事件
$(document).on('click', '.sertifikat-button', function () {
  const $modal = $('#form-modal');
  // 从按钮的data属性直接获取当前行的id_mahasiswa
  const mahasiswaId = $(this).data('mahasiswa-id');
  
  // 直接使用获取到的id_mahasiswa，无需依赖selectedRow()方法
  if (dapatSertifikat(dataEvent, { id_mahasiswa: mahasiswaId })) {
    window.open(`<?= base_url() ?>files/certificate/<?= $id_event ?>/${mahasiswaId}`, '_blank');
  }
});

额外说明： #

• 如果你一定要保留selectedRow()逻辑，需确保你的DataTable确实有这个自定义方法，且点击按钮时能正确选中当前行。但直接从按钮的data属性获取数据更可靠，也更符合动态元素的处理逻辑。
• 禁用按钮本身不可点击，无需绑定事件，也不需要设置ID。

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