Laravel中DataTable分页后Ajax调用无法获取数据库记录

我是Laravel开发新手，使用DataTable展示数据库中的注册用户列表。点击列表中的「View Details」按钮时，会通过Ajax调用根据用户ID获取单用户详情。当前问题是：在DataTable第一页时点击按钮Ajax调用正常，但切换到第二页或通过搜索框搜索用户后点击按钮，Ajax调用无法执行，且控制台无报错信息。

HTML代码 #

<meta name="_token" content="{{ csrf_token() }}">
<table id="user_table" class="table  table-row-bordered gy-5 gs-7">
  <thead>
    <tr class="fw-bold fs-6 text-gray-800">
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Action</th>
   </tr>
 </thead>
 <tbody>
   @foreach ($register_users as $value)
    <tr>
       <td>{{ $value->id }}</td>
       <td>{{ $value->name.' '.$value->lname }}</td>
       <td>{{ $value->email }}</td>
       <td style="display: inline-flex;">
       <a href="javascript:void(0)" data-id="{{ $value->id }}"  data-bs-toggle="modal" data-bs-target="#activateModal" class="viewDetailModal btn btn-warning btn-hover-rise me-5 btn-sm" style="margin: 1px">View Details</a>
       </td>
   </tr>
  @endforeach
 </tbody>
</table>

jQuery代码 #

$(".viewDetailModal").click(function(e) {

     e.preventDefault();

     var customer_id = $(this).data('id');
     var _token = $("input[name='_token']").val();

     $.ajax({
        url: "{{ route('get.user.details') }}",
        type: 'POST',
        data: {_token:_token, customer_id:customer_id},
        success: function (response){
            console.log(response);

            if(response.lname)
              {
                 response.lname = response.lname;
              }
              else
              {
                 response.lname = '';
              }

           $('#user_id').text(response.id);
           $('#user_name').text(response.name+' '+response.lname);
           $('#user_email').text(response.email);
           $('#user_mobile_no').text(response.mobile_no);
           $('#user_cnic_no').text(response.cnic_no);
           $('#user_passport_no').text(response.passport_no);
           $('#user_country_id').text(response.country_id);
           $('#user_city_id').text(response.city_id);        
            
        }
    });
  });

DataTable代码 #

$("#user_table").DataTable({
        "order": [[ 0, "desc" ]],
         "language": {
         "lengthMenu": "Show _MENU_",
         },
         "dom":
         "<'row'" +
         "<'col-sm-6 d-flex d-none d-sm-none d-md-block align-items-center justify-content-md-start'l>" +
         "<'col-12 col-sm-6 d-flex align-items-center justify-content-md-end'f>" +
         ">" +

         "<'table-responsive'tr>" +

         "<'row'" +
         "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
         "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
         ">"
 });

问题根源是事件绑定范围：你用的直接绑定方式只会给页面初始化时已存在的元素绑定事件，但DataTable分页、搜索时会动态生成新的DOM节点（第二页或搜索结果的行都是新创建的），这些新元素不会自动带上之前绑定的点击事件。

解决方法是改用事件委托，把事件绑定到一个始终存在的父容器上（比如表格本身），再指定触发事件的子元素选择器。同时修正一个CSRF token获取的错误（原代码用input标签取，但实际是meta标签）：

// 事件委托绑定点击事件
$("#user_table").on("click", ".viewDetailModal", function(e) {
    e.preventDefault();

    var customer_id = $(this).data('id');
    var _token = $("meta[name='_token']").val(); // 修正token获取方式

    $.ajax({
        url: "{{ route('get.user.details') }}",
        type: 'POST',
        data: {_token:_token, customer_id:customer_id},
        success: function (response){
            console.log(response);

            // 简化空值判断逻辑
            var lname = response.lname || '';

            $('#user_id').text(response.id);
            $('#user_name').text(response.name + ' ' + lname);
            $('#user_email').text(response.email);
            $('#user_mobile_no').text(response.mobile_no);
            $('#user_cnic_no').text(response.cnic_no);
            $('#user_passport_no').text(response.passport_no);
            $('#user_country_id').text(response.country_id);
            $('#user_city_id').text(response.city_id);        
        }
    });
});

这样不管DataTable怎么动态刷新内容，点击事件都能正常触发。

内容的提问来源于stack exchange，提问作者Ahil Khan