Bootstrap 5模态框确认按钮失效，删除记录功能无法实现求助

核心问题 #

1. 提交按钮不在表单范围内：模态框底部的Delete提交按钮不在触发模态框的<form>标签内部，点击时无法触发表单提交操作。
2. Bootstrap 5属性命名变更：Bootstrap 5将原data-toggle、data-dismiss属性更新为data-bs-toggle、data-bs-dismiss，旧属性在Bootstrap 5环境下无法正常生效。

修正后的代码 #

表单部分

<!-- Form -->
<form action="{{ url("delete/$hxh->id") }}" method="POST" id="deleteForm">
   {{ method_field('DELETE') }} {{ csrf_field() }}
   <button type="button" id="myButton" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#myModal">
       <i class="fa fa-trash"></i>&nbsp;Delete
   </button>
</form>

模态框与脚本部分

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Hunter</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Do you really want delete <b>{{$hxh->name_hunter}}</b>?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fa fa-xmark"></i>&nbsp;Cancel
                </button>
                <!-- 通过表单ID触发提交 -->
                <button type="button" class="btn btn-danger" onclick="document.getElementById('deleteForm').submit();">
                    <i class="fa fa-trash"></i>&nbsp;Delete
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Script Modal -->
<script>
    $('#myModal').on('shown.bs.modal', function () {
        $('#myButton').trigger('focus')
    })
</script>

说明 #

• 给表单添加id="deleteForm"，通过模态框内按钮的onclick事件调用表单的submit()方法，解决按钮不在表单内无法提交的问题。
• 替换所有旧属性为Bootstrap 5的data-bs-*前缀属性，确保模态框的显示、隐藏功能正常。

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