ajax post执行2次,如何修复：Ajax - 多次运行发布请求

我有一个表格(用 Datatables 脚本格式化)，它有一列包含几个用于管理操作的图标。当用户单击一个图标时，它会加载一个模态并使用 POST 方法获取模态内容。

Modal 有一个保存按钮，用于在用户做出选择后完成操作。当他们点击保存按钮时，另一个帖子脚本完成了对用户的请求和反馈。

当用户第一次加载页面时，这个过程工作正常。页面上有一个刷新按钮，可以在不重新加载PAGE的情况下重新加载TABLE。

如果用户使用此按钮刷新页面并尝试上述操作。它打开模态和保存按钮触发发布操作 2 次。如果用户再次刷新页面(使用刷新按钮)并尝试其中一个操作图标，则 post 脚本运行 3 次......换句话说，如果你刷新 10 次 post 脚本运行 10 次......

如果用户使用浏览器刷新按钮，我们不会得到这种重复。

只是想知道我们是否可以在不去掉刷新按钮的情况下解决这个问题。

我们尝试了不同的方式将脚本放置在页面中。但仍然无法理解是什么触发了多个发布请求。

//javascript //第 1 步 - 用动作列表加载模态

$("#proj_data tbody").on("click", ".update_job_progress", function () {

var pn = $(this).attr('mypn');

$.post('reports_job_progress.php', {proj: pn}, function (data) {

$('

});

});

//第2步 - 保存用户选择

$('body #modal-container').on('click', '.btn_jobaction', function () {

var pn = $("#pn").val();

$.post("reports_job_progress_backend.php", $("#progress_list").serialize(),

function (res) {

if (res === 0) {

alert("There is a problem saving the information. please try again");

} else {

$("#prog" + pn).html(res);

$("#progress_update_modal").modal('hide');

}

}

);

});

//第3步 - 销毁模态

$("body").on("hidden.bs.modal", ".modal", function () {

$("#modal-container").empty();

});

你能帮我理解这段代码的问题吗？