点击Delete按钮JS模态框未弹出，提示deleteConfirmation不是函数

问题概况 #

点击分类页的Delete按钮无弹窗，控制台抛出错误：categories:654 Uncaught TypeError: deleteConfirmation is not a function，需求是实现点击Delete按钮弹出确认删除的模态框，包含Cancel和Delete按钮。

核心原因分析 #

1. 脚本未被正确渲染：@push('scripts')中的JS函数未输出到页面，大概率是因为主布局文件中缺少@stack('scripts')指令，导致函数未定义。
2. 模态框Cancel按钮逻辑错误：当前Cancel按钮使用data-bs-toggle="modal"会重复触发模态框打开，而非关闭。
3. 缺少实际删除逻辑：现有代码仅打开模态框，未绑定删除请求的执行逻辑。

解决方案及修正代码 #

1. 确保脚本正常输出

检查你的主布局文件（如layouts/app.blade.php），在</body>标签前添加@stack('scripts')，这样@push('scripts')中的代码才会被正确加载到页面中。

2. 修正模态框及删除逻辑

以下是调整后的完整代码：

列表按钮部分（categories.blade.php）

<tbody>
    @php
      $serial_no = ($categories->currentPage()-1)*$categories->perPage();
    @endphp
    @foreach ($categories as $category)
        <tr>
          <td>{{ ++$serial_no }}</td>
          <td>{{ $category->name }}</td>
          <td>{{ $category->slug }}</td>
           <td>
              <a class="text-info" style="margin: 0px 20px; " href="{{ route('admin/category.edit',['category_id'=>$category->id]) }}">Edit</a> 
              <a class="text-danger" style="margin-left: 20px;" href="#" onclick="deleteConfirmation({{ $category->id }})">Delete</a>
           </td>
       </tr>
   @endforeach
</tbody>

修正后的模态框代码

<div class="modal" id="deleteConfirmation">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 添加删除表单 -->
            <form id="deleteCategoryForm" method="POST" action="">
                @csrf
                @method('DELETE')
                <div class="modal-body pb-30 pt-30">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h4 class="pb-3">是否要删除该记录？</h4>
                            <!-- 修正Cancel按钮为关闭模态框 -->
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <!-- 绑定表单提交触发删除 -->
                            <button type="submit" class="btn btn-danger">Delete</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

修正后的JS脚本

@push('scripts')
<script>
    function deleteConfirmation(id) {
        // 动态设置删除路由
        const deleteUrl = "{{ route('admin/category.destroy', ['category_id' => ':id']) }}".replace(':id', id);
        document.getElementById('deleteCategoryForm').action = deleteUrl;
        
        // Bootstrap 5 正确打开模态框的方式
        const modal = new bootstrap.Modal(document.getElementById('deleteConfirmation'));
        modal.show();
    }
</script>
@endpush

补充说明

• 若仍使用jQuery版本的Bootstrap，可将模态框打开代码换回$('#deleteConfirmation').modal('show')，但需确保jQuery和Bootstrap JS已正确加载。
• 确认你的删除路由admin/category.destroy已在路由文件中正确定义。

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