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

Question

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

Modal 有一个保存按钮，可以在用户做出选择后完成操作。当他们点击保存按钮时，另一个发布脚本完成请求并反馈给用户。

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

如果用户使用此按钮刷新页面并尝试上述操作。它打开模态并保存按钮触发发布操作 2 次。如果用户再次刷新页面（使用刷新按钮）并尝试其中一个操作图标，则发布脚本运行 3 次...换句话说，如果您刷新 10 次，则发布脚本运行 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');
                }
            }
    );

});

//第三步 - 销毁模态

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

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

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

Answer 1

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

Answer 2

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

$(document).ready(function() {
     $('body #modal-container').on('click', ...
     $('body #modal-container').on('click', ...
});

Answer 3

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