Дублирование ajax запросов при нажатии кнопки

Question

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

function OpenConfirmPopup(title, msg, func) {
        var mymodal = $('#confirmModal');
        mymodal.find('.modal-title').text(title);
        mymodal.find('.modal-body').text(msg);
        mymodal.modal('show');
        $('.btn-confirm').click(function () {
            var args = new Array();
            for (var i = 1; i < arguments.length; i++)
                args.push(arguments[i]);
            window[func].apply(this, args);
        });
    }

А вот звонящий

function ConfirmAttendance() {
    OpenConfirmPopup("Attendance", "Are you sure you want to confirm the attendance?", "ConfirmAndCloseSession");
}

А это кнопка

<button class="btn btn-primary btn-confirm" data-dismiss="modal">Ok</button>
<button class="btn btn-default" data-dismiss="modal">Cancel</button>

Если Я звоню ConfirmAttendance, затем отменяю, затем снова звоню и нажимаю ок, кажется запрос выполняется дважды. Что я тут не так делаю?

Answer 1

Я сделал обходной путь, отсоединив и повторно связав событие, используя off, затем on:

function OpenConfirmPopup(title, msg, func) {
    var mymodal = $('#confirmModal');
    mymodal.find('.modal-title').text(title);
    mymodal.find('.modal-body').text(msg);
    mymodal.modal('show');
    $('.btn-confirm').off('click').on('click', function () {
        var args = new Array();
        for (var i = 1; i < arguments.length; i++)
            args.push(arguments[i]);
        window[func].apply(this, args);
    });
}

Answer 2

Проблема заключается в том, что вы прикрепляете к кнопке новый обработчик события click каждый раз, когда отображается модальный режим. Переместите этот лог c за пределы функции.

Единственная проблема заключается в том, что вам нужно будет передать переменную func через функцию OpenConfirmPopup() в обработчик щелчков. Это можно сделать с помощью атрибута data() элемента:

function OpenConfirmPopup(title, msg, func) {
  var $modal = $('#confirmModal');
  $modal.find('.modal-title').text(title);
  $modal.find('.modal-body').text(msg);
  $modal.find('.btn-confirm').data('func', func);
  $modal.modal('show');
}

jQuery($ => { 
  $('.btn-confirm').click(function() {
    var args = new Array();
    for (var i = 1; i < arguments.length; i++)
      args.push(arguments[i]);
    window[$(this).data('func')].apply(this, args);
  });
});

Я бы также поставил под сомнение цель создания массива args из arguments. Два массива будут идентичны, поэтому просто предоставьте аргументы прямо:

$('.btn-confirm').click(function() {
  window[$(this).data('func')].apply(this, arguments);
});

Если вы делаете это для клонирования массива, используйте slice():

$('.btn-confirm').click(function() {
  window[$(this).data('func')].apply(this, arguments.slice(0));
});

Или распространяйте синтаксис (если нацеливаемые вами браузеры поддерживают ES6):

$('.btn-confirm').click(function() {
  window[$(this).data('func')].apply(this, [...arguments]);
});