confirm弹窗取消按钮失效：点击确认/取消均触发Ajax删除数据求助

你的问题核心是点击取消按钮仍执行删除，原因大概率是[data-repeater-delete]是repeater插件自带的删除按钮，插件本身已为它绑定了DOM删除的默认事件——你的confirm判断只拦截了AJAX请求，却拦不住插件自带的DOM移除逻辑。

修复步骤： #

• 阻止按钮的默认行为和事件冒泡，避免触发插件的默认删除动作
• 仅在confirm确认后，再执行AJAX删除和DOM移除操作

修正后的代码： #

$(document).on('click', '[data-repeater-delete]', function (e) {
    // 阻止默认行为和事件冒泡，阻断插件的默认删除逻辑
    e.preventDefault();
    e.stopPropagation();

    if (confirm('Are you sure you want to delete this element?')) {
        var el = $(this).parent().parent();
        var id = el.find('.id').val();

        $.ajax({
            url: '{{route('invoice.product.destroy')}}',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': jQuery('#token').val()
            },
            data: {
                'id': id
            },
            cache: false,
            success: function (data) {
                // 后台删除成功后，手动移除页面元素
                el.remove();
            },
            error: function(xhr) {
                // 可选：处理删除失败的情况
                alert('删除失败，请重试');
            }
        });
    }
});

关键说明： #

1. e.preventDefault() + e.stopPropagation()：彻底阻断插件对该按钮的默认绑定事件，确保只有自定义逻辑生效
2. 手动在AJAX成功回调中执行el.remove()：替代插件的自动DOM删除，保证仅当后台删除成功后才移除页面元素
3. 新增error回调：处理删除失败场景，优化用户体验

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