CodeIgniter3+Bootstrap4环境DataTable行操作按钮无法打开模态框求助

核心是动态DOM的事件绑定失效：
你使用的$('.btn-edit').on('click', function(){})是直接绑定写法，仅对$(document).ready()执行时已经存在于DOM中的元素生效。而你开启了DataTable的服务端渲染模式，表格行、操作按钮都是Ajax异步请求完成后才动态插入到页面的，初始化绑定事件时这些按钮还不存在，点击事件没有实际绑定到按钮上，所以点击没有响应。

把直接绑定改成事件委托绑定，将事件绑定到页面初始化时就已存在的父级元素上，委托父元素监听子元素的点击事件，修改你的jQuery代码中的事件绑定部分即可：

<script>
$(document).ready(function(){
    $('#jobtitlesdatatable').DataTable({
        serverSide: true,
        searching: true,
        ajax: {
            url : "<?php echo base_url("jobtitle/jobtitles_page") ?>",
            type : 'post'
        },
    });
    // 编辑按钮委托绑定
    $(document).on('click', '.btn-edit', function(){
        const id = $(this).data('id');
        const title = $(this).data('name');
        console.log("JOBID: " + id);
        console.log("JOBTITLE: " + title);
        $('.job_id').val(id);
        $('.job_title').val(title);
        $('#editModal').modal('show');
    });
    // 删除按钮委托绑定
    $(document).on('click', '.btn-delete', function(){
        const id = $(this).data('id');
        $('.jobID').val(id);
        $('#deleteModal').modal('show');
    });
});
</script>

如果想要更好的性能，可以把委托的父元素从document换成页面初始化就存在的表格元素$('#jobtitlesdatatable')，减少事件冒泡的范围：

$('#jobtitlesdatatable').on('click', '.btn-edit', function(){
  // 原有逻辑不变
})
$('#jobtitlesdatatable').on('click', '.btn-delete', function(){
  // 原有逻辑不变
})

额外优化点 #

你编辑模态框的隐藏id输入框重复写了class属性：<input type="hidden" class="form-control job_id" name="job_id" class="jobID">，虽然不影响模态框弹出，但会导致class识别异常，建议修改为<input type="hidden" class="form-control job_id jobID" name="job_id">。

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