如何修复：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像这样&nbsp;使用$("#proj_data tbody").off("click").on("click", ...，看看是否能解决您的问题。

Answer 2

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

Answer 3

您将多次绑定点击事件。您可以重置回调，检查回调是否已设置或（更好）在脚本的一部分中设置单击侦听器，无论何时刷新页面（使用提到的刷新按钮），都不会执行，例如：$(document).ready(function() {&nbsp; &nbsp; &nbsp;$('body #modal-container').on('click', ...&nbsp; &nbsp; &nbsp;$('body #modal-container').on('click', ...});