データセット内のボタンクリックをモーダルで登録できません

Question

私はデータテーブルを使用していますが、1つの列に削除用のボタンがあります。 このボタンをクリックするとモーダルが表示され、行を削除するにはYES/NOが表示されます。

私はモーダルを稼ぐことができましたが、私のIDをフェッチするためのjavascriptを手に入れることはできません。クリックイベントは登録されません。

これは私が（私は例えば、テーブル、コードの明白な部分を省略）持っているコードです：今、私は次のことをやっているとき

<!-- Modal dialog for the deletion confirmation --> 
<?php 
$delAction = 'dashboard/deleteVacancy'; 
?> 
<div id="deletemodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="title-delete" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <form class="modal-content" action="<?=site_url($delAction, $link_protocol)?>" method="post" data-class="validation"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span class="fa fa-times" aria-hidden="true"></span> 
       </button> 
       <h4 class="modal-title" id="title-duplicate">verwijderen?</h4> 
      </div> 
      <div class="modal-body"> 

      </div> 
      <div class="modal-footer"> 
       <?php echo form_submit('deletebtn', lang("general_yes"), "class='btn btn-secondary'"); ?> 
       <a id="delcancelmodal" class="btn btn-secondary" data-dismiss="modal"><?=lang("general_no")?></a> 
      </div> 
     </form> 
    </div> 
</div> 

：

モーダルコードJavaScriptの何が（私は??、アラートがポップアップすることを期待）たまたま：

$(document).ready(function() { 
    $('button.rowBtnDelete').on('click', function (e) { 
     e.preventDefault(); 
     //var id = $(this).closest('tr').data('id'); 
     //$('#deletemodal').data('id', id).modal('show'); 
     alert("pls"); 
    }); 
}); 

EDIT：0123：DataTableの設定コードは次のようになります組織

var table = $('#table_id').DataTable({ 
    "language": { 
     "decimal":  "", 
     "emptyTable":  "Geen data gevonden in tabel", 
     "info":   "Toon _START_ tot _END_ van de _TOTAL_ activiteiten", 
     "infoEmpty":  "Toon 0 tot 0 van de 0 activiteiten", 
     "infoFiltered": "(gefilterd van _MAX_ totale activiteiten)", 
     "infoPostFix": "", 
     "thousands":  ",", 
     "lengthMenu":  "Toon _MENU_ activiteiten", 
     "loadingRecords": "Loading...", 
     "processing":  "Processing...", 
     "search":   "Zoeken:", 
     "zeroRecords": "Geen resultaten gevonden voor je zoekopdracht", 
     "paginate": { 
      "first":  "Eerste", 
      "last":  "Laatste", 
      "next":  "Volgende", 
      "previous": "Vorige" 
     }, 
     "aria": { 
      "sortAscending": ": klik om de kolom oplopend te sorteren", 
      "sortDescending": ": klik om de kolom aflopend te sorteren" 
     } 
    }, 
    "order": [[ 1, "desc" ]], 
    dom: 'Bfrtip', 
    buttons: [ 
     { 
      extend: 'copy', 
      orientation: 'landscape', 
      pageSize: 'LEGAL', 
      exportOptions: { 
       columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] 
      } 
     }, 
     { 
      extend: 'excel', 
      orientation: 'landscape', 
      pageSize: 'LEGAL', 
      exportOptions: { 
       columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] 
      } 
     }, 
     { 
      extend: 'pdfHtml5', 
      orientation: 'landscape', 
      pageSize: 'LEGAL', 
      exportOptions: { 
       columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] 
      } 
     } 
    ], 
    "pagingType": "full_numbers", 
    drawCallback: function() { 
     $('button.rowBtnDelete').on('click', function (e) { 
      //e.preventDefault(); 
      alert("pls"); 

      // Get data like so 
      //$(this).data('vacid'); 
     }); 
    } 
}); 

Answer 1

のための「私の空席」ページでの//のDataTableだから、問題はあなたの削除モーダルで削除する必要があるレコードのIDを取得していないことです。私の提案は、あなたのモーダルに隠されたIDフィールドを含めることです。行の削除ボタンをクリックすると、idで隠しフィールドが更新されます。

<form class="modal-content" action="<?=site_url($delAction, $link_protocol)?>" method="post" data-class="validation"> 
    <!-- Add below --> 
    <input type="hidden" id="deleteModalVacId" name="vacid" value=""/> 

（vacidは、行ボタン要素であると仮定した場合）、Clickイベント、あなたのクリックイベントを定義します

$(document).ready(function() { 
    $('button.rowBtnDelete').on('click', function (e) { 
     e.preventDefault(); 
     var id = $(this).data('vacid'); 
     $('#deleteModalVacId').val(id); 
     $('#deletemodal').modal('show'); 
    }); 
});