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

Question

我有一个表并与数据表一起使用。在表中我使用了引导模式。模态在表格的第一页工作正常，但在第一页后模态不起作用。我的表代码： <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');         }    }); });});这是引导程序的模态   <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 行数据中运行良好。但是当我进入第二页时，这个模式不起作用，我搜索了几个博客和堆栈并关注它们但没有解决。何我能解决这个问题。

Answer 1

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

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

        }

    });

 });

});

希望这有效:)

Answer 2

我只是把这段代码

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

而不是这个代码。

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

在第二页和更多页面上，一切对我来说都很好。