如何修复：Ajax - 多次运行发布请求

Question

我有一个表格（用 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) {        $('<div id="progress_update_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>').appendTo('#modal-container').html(data).modal();    });});//第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();});你能帮我理解这段代码的问题吗？

Answer 1

看起来您的问题是由将多个 onclick 处理程序绑定到元素引起的。请尝试off像这样 使用$("#proj_data tbody").off("click").on("click", ...，看看是否能解决您的问题。

Answer 2

但是，仅添加 .off('click') 会禁用其他图标单击事件，因为所有图标共享相同的类。在玩完代码后，我发现添加 $(this).off('click') 就可以了。现在一切正常。感谢@buffy 提供正确的方向。

Answer 3

您将多次绑定点击事件。您可以重置回调，检查回调是否已设置或（更好）在脚本的一部分中设置单击侦听器，无论何时刷新页面（使用提到的刷新按钮），都不会执行，例如：

$(document).ready(function() {

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

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

});