ASP.NET中使用preventDefault()后如何撤销以恢复表单正常提交

问题根源 #

你每次点击「计算利润」按钮时，都给全局表单新增了一个永久生效的submit事件监听器，只要触发表单提交就会阻止默认行为，因此后续点击create提交按钮时，该监听器依然生效，导致表单无法正常提交。同时你每次点击计算利润都会重复绑定相同的监听器，还存在内存泄露隐患。

最优解决方案（推荐） #

你完全不需要绑定表单的submit事件，从根源上阻止计算利润按钮触发提交即可，实现方式非常简单：

1. 将计算利润按钮的type属性设置为button，这类按钮默认不会触发表单提交：

<!-- 原按钮代码 -->
<button onclick="NetProfit()">计算利润</button>
<!-- 修改后 -->
<button type="button" onclick="NetProfit()">计算利润</button>

2. 删掉NetProfit函数中绑定表单submit事件的冗余代码，修改后的函数如下：

function NetProfit() {
    document.getElementById('strRes').innerHTML = "";
    var price = document.getElementById('price').value;
    $.ajax({
        type: "POST",
        dataType: 'JSON',
        url: "/ExternalMerch/Product/NetProfitCalc",
        data: { price: price },
        success: function (data) {
            var str = JSON.stringify(data).split(',');
            for (i = 0; i < str.length; i++) {
                document.getElementById('strRes').innerHTML += str[i].replaceAll('"', '').replaceAll(/\[|\]/g, '') + '</br>';
            }
        },
        error: function (data) {
        }
    });
}

上述代码还简化了重复的字符替换逻辑，原有功能不变。

其他兼容方案 #

如果有特殊需求需要保留表单submit监听逻辑，可以只针对计算利润按钮触发的提交做阻止，这段监听代码仅需在页面初始化时绑定一次，不要放在NetProfit函数中重复绑定：

$('form').submit(function (ev) {
    // 假设计算利润按钮的id为calcProfit，可根据实际情况修改判断条件
    if (ev.originalEvent.submitter.id === 'calcProfit') {
        ev.preventDefault();
    }
});

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