fullcalendar - странное поведение после нескольких кликов

Question

Я использую Fullcalendar для личного проекта (для члена семьи), и я обнаружил странное поведение после многих нажатий на события, я объясняю

Мое событиеНажмите, чтобы открыть их для редактирования.

eventClick: function(event, resourceObj) {
        //alert(resourceObj.title);
        let evt = {};
        let end = '';
        if(event.end) {
            evt['end'] = event.end.format();
        } else {
            evt['end'] = event.start.format();
        };
        evt['title'] = event.title;
        evt['resourceId'] = event.resourceId;
        evt['description'] = event.description;
        evt['color'] = event.color;
        evt['id'] = event.id;
        evt['start'] = event.start.format();
        openModal(evt);
        // mise a jour d'un event
        $('#formModal #newEventSubmit').on('click', function() {
            updateDate();
            if ($('#newEventTitle').val()) {
                var eventData = {
                    start: $('#newEventStart').val(),
                    end: $('#newEventEnd').val(),
                    resourceId: $('#newEventResource').val(),
                    description: $('#newEventDescription').val(),
                    title: $('#newEventTitle').val(),
                    color: $('#newEventColor').val(),
                    id: $('#newEventId').val(),
                    allDay: false
                };
                console.log(eventData);
                if($('#newEventStartH').val() == '' && $('#newEventEndH').val() == ''){
                    eventData['allDay'] = true;
                }
                $('#calendar').fullCalendar('removeEvents', event._id);
                putEvent(eventData, event);
            }
            $('#formModal').find('input').val('');
            $('#formModal').modal('hide');
        });
        // action pour delete un event
        $('#formModal #newEventDelete').on('click', function() {
            $('#calendar').fullCalendar('removeEvents', event._id);
            deleteEvent(evt);
            $('#formModal').modal('hide');
            //$('#calendar').fullCalendar('refetchEvents');

        });

    },

OpenModal => создать модал с 2 кнопками (обновить и удалить)

Когда я нажимаю на событие, закрываю модально, открываю еще одно и удаляю это => удаление относится ко всем событиям, на которые нажали

когда я проверяю сеть, я наблюдаю за всеми удаляемыми идентификаторами с помощью моего остальных API

Ты понимаешь?

Answer 1

Это потому, что каждый раз, когда вы нажимаете на событие, вы выполняете

$('#formModal #newEventSubmit').on('click', function() {

и

$('#formModal #newEventDelete').on('click', function() {

Каждый из них добавляет новую функцию обработки событий к модальным кнопкам «Отправить» и «Удалить», которые запускаются при нажатии кнопки. Однако он не удаляет все предыдущие обработчики событий. Поэтому, если вы нажмете на несколько событий, это добавит к кнопкам все больше и больше обработчиков событий. И затем, когда вы нажимаете одну из этих кнопок, она сразу запускает все подключенных обработчиков событий - вот почему вы видите много запросов, например, для функции удаления.

Простое решение этой проблемы - удалить предыдущие обработчики событий перед добавлением нового. Вы можете сделать это с помощью метода jQuery .off () :

$('#formModal #newEventSubmit').off('click').on('click', function() {

и

$('#formModal #newEventDelete').off('click').on('click', function() {