DataTable (CodeIgniter 3 & Bootstrap 4) - 单击行操作按钮不打开模式

Question

我正在使用来自 bootstrap 4 的数据表并已成功加载数据，但问题是每当我单击行操作按钮（删除或 edit) 它不会打开各自的模式。

这是我的数据的当前输出 table:

这是我的 HTML 数据表代码和用于编辑和删除的模式 (index.php):

<div class="col-md-12">
                                <table id="jobtitlesdatatable" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Job Title</th>
                                            <th>Date Created</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
</div>
<!-- Edit Job Title Modal -->
<form action="<?= base_url('jobtitle/editJobTitle') ?>" method="post">
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit Job Title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
         
            <div class="form-group">
                <label>Job Title</label>
                <input type="text" class="form-control job_title" name="job_title" placeholder="Job Title" required>
            </div>
             
        </div>
        <div class="modal-footer">
            <input type="hidden" class="form-control job_id" name="job_id" class="jobID">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
        </div>
    </div>
    </div>
</form>
<!-- End Modal Create Job Title -->

<!-- Modal Delete Job Title -->
<form action="<?= base_url('jobtitle/deleteJobTitle') ?>" method="post">
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Delete Job Title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
         
           <h4>Are you sure want to delete this Job Title?</h4>
         
        </div>
        <div class="modal-footer">
            <input type="hidden" name="job_id" class="jobID">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            <button type="submit" class="btn btn-danger">Yes</button>
        </div>
        </div>
    </div>
    </div>
</form>
<!-- End Modal Delete Product-->

这是我的 JQuery 部分 (index.php):

<script>
$(document).ready(function(){
    $('#jobtitlesdatatable').DataTable({
        serverSide: true,
        searching: true,
        ajax: {
            url : "<?php echo base_url("jobtitle/jobtitles_page") ?>",
            type : 'post'
        },
    });
     // get Edit Product
    $('.btn-edit').on('click',function(){
        // get data from button edit
        const id = $(this).data('id');
        const title = $(this).data('name');
        console.log("JOBID: " + id);
        console.log("JOBTITLE: " + title);
        // Set data to Form Edit
        $('.job_id').val(id);
        $('.job_title').val(title);
        // Call Modal Edit
        $('#editModal').modal('show');
    });

    $('.btn-delete').on('click',function(){
        // get data from button edit
        const id = $(this).data('id');
        // Set data to Form Edit
        $('.jobID').val(id);
        // Call Modal Edit
        $('#deleteModal').modal('show');
    });
    
});

这是来自 Controller 文件的 jobtitles_page() 代码：

public function jobtitles_page()
 {
      $draw = intval($this->input->get("draw"));
      $start = intval($this->input->get("start"));
      $length = intval($this->input->get("length"));

      $jobtitles =  $this->JobTitleModel->get_all('jobtitle', null);

      $data = array();

      foreach($jobtitles as $jobTitle) {

           $data[] = array(
                $jobTitle->JOBID,
                $jobTitle->JOBTITLE,
                $jobTitle->CREATEDDATE,
                $jobTitle->href = '<a href="#" class="btn btn-warning btn-sm btn-edit" data-id="'.$jobTitle->JOBID.'" data-name="'.$jobTitle->JOBTITLE.'"><span class="fa fa-edit"></span></a>
                <a href="#" class="btn btn-danger btn-delete" data-id="'. $jobTitle->JOBID.'"><span class="fa fa-trash"></span></a>'
           );
      }

      $output = array(
           "draw" => $draw,
             "recordsTotal" => count($jobtitles),
             "recordsFiltered" => count($jobtitles),
             "data" => $data
        );
      echo json_encode($output);
      exit();
 }

当我在 Dev Console 中检查其元素时，它显示如下：

它正确地传递了 ID 和 JOBTITLE。

这个问题可能是什么原因造成的，有哪些解决方法？

Answer 1

正如@andrewJames 评论的那样，您正在尝试将侦听器附加到尚不存在的元素。您可以根据他们的建议使用委托，也可以使用 initComplete，DataTable 中的一个事件。

$(document).ready(function(){
    $('#jobtitlesdatatable').DataTable({
        serverSide: true,
        searching: true,
        ajax: {
            url : "<?php echo base_url("jobtitle/jobtitles_page") ?>",
            type : 'post'
        },
        initComplete: function(settings, json) {
             console.log( 'DataTables has finished its initialisation.' );
             doInit();
         }
    });   
});

function doInit() {
     // get Edit Product
    $('.btn-edit').on('click',function(){
        // get data from button edit
        const id = $(this).data('id');
        const title = $(this).data('name');
        console.log("JOBID: " + id);
        console.log("JOBTITLE: " + title);
        // Set data to Form Edit
        $('.job_id').val(id);
        $('.job_title').val(title);
        // Call Modal Edit
        $('#editModal').modal('show');
    });

    $('.btn-delete').on('click',function(){
        // get data from button edit
        const id = $(this).data('id');
        // Set data to Form Edit
        $('.jobID').val(id);
        // Call Modal Edit
        $('#deleteModal').modal('show');
    });
}

DataTable (CodeIgniter 3 & Bootstrap 4) - 单击行操作按钮不打开模式

DataTable (CodeIgniter 3 & Bootstrap 4) - Clicking the row action buttons not opening modal

javascript

jquery

bootstrap-4

datatables

codeigniter-3