Laravel 10中AJAX模态框删除数据二次点击失效问题排查

问题描述 #

在Laravel 10项目中，通过模态框结合AJAX实现产品删除功能：首次点击删除按钮能成功获取对应product-id并完成删除，但第二次点击其他产品的删除按钮时，无法获取对应的product-id，导致删除失败。

相关代码 #

JS代码 #

$(function () {
    $("#delete-btn").click(function () {
        var productId = $(this).data('product-id');
        $('#deleteModal').data('product-id', productId);
    });

    $('#deleteModal').on('hidden.bs.modal', function () {
        $(this).removeData('product-id');
        $('#deleteModal').modal('hide');
    });

    $("#deleteModal .delete-btn-modal").click(function () {
        var productId = $('#deleteModal').data('product-id');
        $.ajax({
            url: '/products/' + productId,
            type: 'DELETE',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) {
                console.log(data.message);

                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: data.message,
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('.table').load(location.href + ' .table')
                    }
                });
            },
    

        $('#deleteModal').modal('hide');
    });
});

页面删除按钮代码 #

<button id="delete-btn" type="button" class="btn btn-danger delete-btn inline-block" data-toggle="modal" data-target="#deleteModal" data-product-id="{{ $product->id }}">
       Delete
</button>

模态框代码 #

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger delete-btn-modal" data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

问题原因分析 #

• 重复ID绑定冲突：HTML中ID是唯一标识，所有删除按钮都用id="delete-btn"，jQuery只会给第一个该ID元素绑定点击事件。后续点击其他按钮时，不会触发更新模态框product-id的逻辑，导致使用旧值或空值。
• JS语法错误：AJAX代码中success回调后缺少闭合的});，导致整个JS代码执行中断，后续逻辑失效。
• 模态框隐藏事件冗余操作：hidden.bs.modal是模态框已隐藏后触发的事件，此时调用modal('hide')属于多余操作，可能干扰状态管理。

修复方案 #

1. 替换重复ID为Class #

删除按钮去掉id="delete-btn"，保留class="delete-btn"：

<button type="button" class="btn btn-danger delete-btn inline-block" data-toggle="modal" data-target="#deleteModal" data-product-id="{{ $product->id }}">
       Delete
</button>

2. 修复JS代码逻辑与语法 #

更新JS代码，修正语法问题，改用Class绑定事件，优化模态框逻辑：

$(function () {
    // 绑定所有删除按钮的点击事件
    $(".delete-btn").click(function () {
        var productId = $(this).data('product-id');
        $('#deleteModal').data('product-id', productId);
    });

    // 模态框隐藏时清理数据，去掉冗余的hide调用
    $('#deleteModal').on('hidden.bs.modal', function () {
        $(this).removeData('product-id');
    });

    $("#deleteModal .delete-btn-modal").click(function () {
        var productId = $('#deleteModal').data('product-id');
        $.ajax({
            url: '/products/' + productId,
            type: 'DELETE',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) {
                console.log(data.message);

                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: data.message,
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('.table').load(location.href + ' .table')
                    }
                });
            },
            // 新增错误处理，方便排查问题
            error: function(xhr) {
                console.error('删除失败:', xhr.responseText);
                Swal.fire('Error!', '删除操作失败，请重试', 'error');
            }
        }); // 补全AJAX闭合括号

        $('#deleteModal').modal('hide');
    });
});

3. 适配动态加载按钮（可选） #

删除后表格会重新加载，新生成的按钮无法绑定事件，建议用事件委托：

// 替换原$(".delete-btn").click(...)代码
$(document).on('click', '.delete-btn', function () {
    var productId = $(this).data('product-id');
    $('#deleteModal').data('product-id', productId);
});

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