Laravel中Ajax调用删除记录时按钮点击事件失效求助

核心问题分析 #

动态生成的删除按钮使用了重复的id="delButton"，HTML规范中ID必须唯一，这会导致事件委托无法正确绑定到所有按钮，进而触发失效。此外，页面缺少jQuery依赖（DataTables依赖jQuery，但代码中未引入），也是可能的触发障碍。

修复步骤 #

1. 修改控制器中按钮的ID为Class #

打开CategoryController.php，修改addColumn方法里的删除按钮代码，将id="delButton"改为class="delButton"：

public function index(Request $request){
    $categories = CategoryModel::select('id', 'name', 'type');

    if ($request->ajax()){
        return DataTables::of($categories)
            ->addColumn('action', function ($row){
               return '<a href="javascript:void(0)" class="btn btn-info editButton" data-id="'.$row->id.'">Edit</a>
                        <a href="javascript:void(0)" class="btn btn-danger delButton" data-id="'.$row->id.'">Delete</a>';
            })
            ->rawColumns(['action'])
            ->make(true);
    }
}

2. 更新JS事件绑定选择器 #

打开create.blade.php中的JS代码，将删除事件的选择器从#delButton改为.delButton，同时优化URL生成方式（使用Laravel路由辅助函数）：

$('body').on('click', '.delButton', function (){
    var id  = $(this).data('id');

    $.ajax({
        url: "{{ route('categories.destroy', '') }}/" + id,
        method: 'DELETE',

        success: function (response){
            table.draw();
            swal("Success!", response.success, "success");
        },
        error: function (error){
            console.log(error)
        }
    });
});

3. 引入jQuery依赖 #

在页面的<script>标签最顶部添加jQuery引入（DataTables依赖jQuery才能正常工作）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>

额外检查 #

• 确保页面头部存在CSRF meta标签：<meta name="csrf-token" content="{{ csrf_token() }}">，否则DELETE请求会被Laravel的CSRF保护拦截。
• 测试时打开浏览器控制台（F12），查看是否有JS报错，便于快速定位其他问题。

内容的提问来源于stack exchange，提问作者Private the Penguin