Question

我有一个表（使用Datatables脚本格式化），并且它的一列包含很少的图标来管理动作。当用户单击图标时，它将加载模态并使用POST方法获取模态内容。

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

首次用户加载页面时，此过程运行良好。页面上有一个刷新按钮，可以在不重新加载PAGE的情况下重新加载TABLE。

如果用户使用此按钮刷新页面并尝试上述操作。它打开模式并保存按钮触发两次后动作。如果用户再次刷新页面（使用“刷新”按钮）并尝试操作图标之一，则脚本运行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');
                }
            }
    );

});

//第3步-销毁模态

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

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

能否请您帮助我理解此代码的问题？

Answer 1

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

Answer 2

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

Answer 3

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

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

如何解决：Ajax-发布请求多次运行

3 个答案: