Как исправить: Ajax - пост-запрос выполняется несколько раз

Question

У меня есть таблица (отформатированная с помощью сценария Datatables), и в ней есть столбец, содержащий несколько значков для управления действиями. Когда пользователь нажимает на иконку, он загружает модальное и получает модальное содержимое методом POST.

Модал имеет кнопку сохранения, чтобы завершить действие после того, как пользователь сделает свой выбор. Когда они нажимают кнопку «Сохранить», другой почтовый скрипт завершает запрос и обратную связь с пользователем.

Этот процесс работает нормально, когда пользователь впервые загружает страницу. На странице есть кнопка обновления, которая может перезагрузить TABLE без перезагрузки PAGE.

Если пользователь использует эту кнопку, чтобы обновить страницу и попробовать вышеуказанные действия. он открывает модальный режим и кнопка «Сохранить» запускает пост-действие 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');
                }
            }
    );

});

// шаг 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', ...
});