Bootstrap Modal 在第二页的 DataTable 中不起作用

Posted 2023-05-08

【中文标题】Bootstrap Modal 在第二页的 DataTable 中不起作用

【英文标题】：Bootstrap Modal Not working in DataTable From Second page

【发布时间】：2020-05-04 23:22:35

【问题描述】：

我有一个表并与数据表一起使用。在表中我使用了引导模式。模态在表格的第一页工作正常，但在第一页后模态不工作。

我的表代码：

 <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>

我的数据表调用插件

$(".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>');           
        
 );   
); 

我的模态调用脚本

$(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'); 
        
    );
 );
);

这里是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>

在edit_staff_modal.php 中，我只需调用usedrid 并获取数据。此代码在数据表的第 10 行数据中运行良好。但是当我进入第二页时，这个模式不起作用，我搜索了几个博客和堆栈并关注它们但没有解决。何我能解决这个问题。

【问题讨论】：

使用 bootbox 会帮助你比较 modal bootbox 是轻量级的。

【参考方案1】：

请更新以下代码以使用 jquery body 选择器绑定您的主点击事件

$(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'); 
        
    );
 );
);

希望这可行:)

【参考方案2】：

我只是把这段代码放了

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

代替这段代码。

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

而且我在第二页和更多页面上一切正常。