I have a table and used with data table. In the table I used bootstrap modal. Modal works Fine in 1st page of table, But after 1st page modal is not working.

My Table Code:

 <table id="myTable" class="table table-striped">
  <tr>
   <td>
     <a data-id="<?php echo $row['id']; ?>" class='userinfo'><i class="mdi mdi-account-edit"></i></a>
   </td>
  </tr>
 </table>

My DataTable Call Plugin

$(".userinfo").on('click',function () {});
    $(document).ready(function (){
        var table = $('#myTable').dataTable({
         dom: 'l<"toolbar">frtip',
            initComplete: function(){
             $("div.toolbar").html('<button type="button" data-toggle="modal" data-target="#add_staff"><span>Add New Staff</span><i style="margin-left: 2px;" class="fas fa-user-plus"></i></button>');           
 }       
 });   
}); 

My modal call script

$(document).ready(function(){
 $('.userinfo').on('click',function(){
  var userid = $(this).data('id');
    $.ajax({
      url: 'inc/edit_staff_modal.php',
      type: 'post',
      data: {userid: userid},
        success: function(response){ 
         $('.mod').html(response);
            $('#empModal').modal('show'); 
        }
    });
 });
});

And Here is the modal of bootstrap

   <div class="modal fade" id="empModal" role="dialog">
    <div class="modal-dialog modal-xl">
     <div class="modal-content">
      <div class="modal-body mod"></div>
     </div>
    </div>
   </div>

In the edit_staff_modal.php I simply call usedrid and fetching the data. This code works very fine in 1st 10 row data of datatable. But when I go to 2nd page and more this modal not working, I searched several blogs and stacks and followed them but not solved. Ho can I solve this.

I have a table and used with data table. In the table I used bootstrap modal. Modal works Fine in 1st page of table, But after 1st page modal is not working.

My Table Code:

 <table id="myTable" class="table table-striped">
  <tr>
   <td>
     <a data-id="<?php echo $row['id']; ?>" class='userinfo'><i class="mdi mdi-account-edit"></i></a>
   </td>
  </tr>
 </table>

My DataTable Call Plugin

$(".userinfo").on('click',function () {});
    $(document).ready(function (){
        var table = $('#myTable').dataTable({
         dom: 'l<"toolbar">frtip',
            initComplete: function(){
             $("div.toolbar").html('<button type="button" data-toggle="modal" data-target="#add_staff"><span>Add New Staff</span><i style="margin-left: 2px;" class="fas fa-user-plus"></i></button>');           
 }       
 });   
}); 

My modal call script

$(document).ready(function(){
 $('.userinfo').on('click',function(){
  var userid = $(this).data('id');
    $.ajax({
      url: 'inc/edit_staff_modal.php',
      type: 'post',
      data: {userid: userid},
        success: function(response){ 
         $('.mod').html(response);
            $('#empModal').modal('show'); 
        }
    });
 });
});

And Here is the modal of bootstrap

   <div class="modal fade" id="empModal" role="dialog">
    <div class="modal-dialog modal-xl">
     <div class="modal-content">
      <div class="modal-body mod"></div>
     </div>
    </div>
   </div>

In the edit_staff_modal.php I simply call usedrid and fetching the data. This code works very fine in 1st 10 row data of datatable. But when I go to 2nd page and more this modal not working, I searched several blogs and stacks and followed them but not solved. Ho can I solve this.

• javascript
• php
• jquery
• twitter-bootstrap
• datatable

• 1 use bootbox it will helps you pare to modal bootbox is lightweight. – Chandrashekhar Komati Commented Jan 18, 2020 at 6:24

2 Answers 2

Please update below code to bind your main click event using jquery body selector

$(document).ready(function(){    
 $("body").on("click", ".userinfo", function(event){ 
  var userid = $(this).data('id');
    $.ajax({
      url: 'inc/edit_staff_modal.php',
      type: 'post',
      data: {userid: userid},
        success: function(response){ 
         $('.mod').html(response);
            $('#empModal').modal('show'); 
        }
    });
 });
});

Hope this works :)

I just Put This code

$(document).on('click', '.userinfo', function(e) {

Instead Of This code.

$('.userinfo').on('click',function(){

And everything works fine for me both on 2nd pages and more.