JQuery Datatables删除行确认异常：点击取消仍执行删除

我明白你遇到的问题了——点击删除按钮弹出确认框，选取消结果还是把行删了，这确实闹心。咱们来看看问题出在哪，怎么解决：

问题根源 #

你的删除按钮用了内联onclick="DeleteFunction()"，但这个写法没有把函数的返回值关联到a标签的点击行为上。也就是说，不管DeleteFunction()返回true还是false，a标签都会默认执行跳转（也就是触发删除的Action），所以取消后删除操作还是会执行。

方案一：修改内联onclick的写法 #

最简单的修复方式，就是把函数的返回值返回给onclick事件，这样当返回false时，就能阻止a标签的默认跳转行为：

修改渲染列里的删除按钮代码：

return '<a href="@Url.Action("Download","AttachmentsUser")?file=' + data + '" class="download">Download</a> | <a href="@Url.Action("Delete","AttachmentsUser")?file=' + data + '" class="delete" onclick="return DeleteFunction()">Delete</a>';

你的DeleteFunction()保持不变即可，现在点击取消时，返回false会阻止a标签跳转，删除操作就不会触发了。

方案二：用jQuery绑定事件（更推荐） #

内联事件写法不够灵活，用jQuery绑定点击事件的方式会更规范，也方便后续扩展：

1. 先把渲染列里的onclick去掉：

return '<a href="@Url.Action("Download","AttachmentsUser")?file=' + data + '" class="download">Download</a> | <a href="@Url.Action("Delete","AttachmentsUser")?file=' + data + '" class="delete">Delete</a>';

2. 然后在你的jQuery代码里添加事件绑定：

$('body').on('click', '.delete', function(e) {
    // 先阻止a标签的默认跳转行为
    e.preventDefault();
    const deleteUrl = $(this).attr('href');
    if (confirm('Are you sure you want to delete this file?')) {
        // 确认后再跳转到删除地址
        window.location.href = deleteUrl;
        // 要是想改成无刷新删除，也可以用AJAX方式：
        // $.get(deleteUrl).done(function() {
        //     assetListVM.refresh();
        // });
    }
});

这种方式的好处是，你可以轻松改成AJAX无刷新删除，不用页面跳转就能直接刷新DataTable，用户体验更好。

额外小提示 #

看你的DeleteFunction()里的提示文本是删除用户，但实际你是删除文件，应该是复制代码时的小失误，记得改成对应的提示哦，比如Are you sure you want to delete this file?，避免用户困惑。

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