Удаление таблицы строк на кодируемом дататируемых данных с использованием пользовательского удаления модального и Ajax Javascript

Question

Я очень озадачен созданием пользовательского мода для удаления данных. Почему кнопка не работает? я делаю что-то не так?

Я использую datatables и codeigniter

Это моя модель User_model.php

public function hapus_data()
  {
    $id=$this->input->post('id');
    $this->db->where('id', $id);
    $result=$this->db->delete('t_user');
    return $result;
  }

Это мой контроллер Manage.php

<?php

class Manage extends CI_Controller {


  public function delete()
  {
    $data=$this->user_model->hapus_data();

    echo json_encode($data);



  }





  //Datatables

  function fetch_user(){

    $this->load->model("user_model");
    $fetch_data = $this->user_model->make_datatables();

    $data = array();

    foreach($fetch_data as $row){
        $sub_array = array();
        $sub_array[] = $row->id;
        $sub_array[] = $row->username;
        $sub_array[] = $row->nama;
        $sub_array[] = $row->email;
        $sub_array[] = $row->no_hp;
        $sub_array[] = $row->role;
        $sub_array[] = $row->kode_satker;
        $sub_array[] = $row->blokir;
        $sub_array[] = '<a href="'.base_url().'manage/update/'.$row->id.'" title="Edit"><div class="btn btn-xs btn-info"><i class="fa fa-edit"></i></div></a>
                        <a href="#" data-id="'.$row->id.'" data-toggle="modal" data-target="#deleteModal" class="delete" title="Hapus" ><div class="btn btn-danger btn-xs delete"><i class="fa fa-trash"></i></div></a>

                        ';
        $data[] = $sub_array;

    }



    $output = array(
        "draw" => intval($_POST["draw"]),
        "recordsTotal" => $this->user_model->get_all_data(),
        "recordsFiltered" => $this->user_model->get_filtered_data(),
        "data" => $data,
    );

    // Output to JSON format
    echo json_encode($output);
}

Это мой вид manage.php

<table id="userdata" class="table table-light table-hover">
    <thead class="align-top thead-dark">
    <tr>
      <th>#ID</th>
      <th>Username</th>
      <th>Nama</th>
      <th>Email</th>
      <th>No HP</th>
      <th>Role</th>
      <th>Kode Satker</th>
      <th>Status</th>
      <th>Aksi</th>
    </tr>
    </thead>


  </table>


</div> 
<?php } ?>

    <form>
    <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</h5>
                                          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                          </button>
                                        </div>
                                        <div class="modal-body">Data User Berhasil Dihapus.</div>
                                        <div class="modal-footer">

                                          <button class="btn btn-primary"  id="btn_delete" type="submit" type="button" >OK</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>

    </form>


<script>


  var userd =  $('#userdata').DataTable({
        // Processing indicator
        "processing": true,
        // DataTables server-side processing mode
        "serverSide": true,
        // Initial no order.
        "order": [],
        // Load data from an Ajax source
        "ajax": {
            "url": "<?php echo base_url('Manage/fetch_user'); ?>",
            "type": "POST",

        },

        "bJQueryUI": true,
             "sPaginationType": "full_numbers",
        //Set column definition initialisation properties
        "columnDefs": [{ 
            "searchable" : false,
            "targets": [8], 
            "orderable": false,


        }]
    });

    $('#userdata').on('click','.delete',function(){

            var ID = $(this).data('id');

            $('#btn_delete').data('id', ID);




    });


    $('#btn_delete').on('click',function () {

      var ID = $(this).data('id');

      $.ajax({

        url : "<?php echo base_url(); ?>manage/delete/"+ID,
        dataType : "JSON",
        data : {id:ID},
        success: function(data){

              alert('success');


              } 

      });



    })


</script>

Проблема в том, что когда я нажал кнопку OK на #deleteModal, ничего не произошло.