fullcalendar - 多次单击后的奇怪行为答案

【问题标题】：fullcalendar - Strange behavior after multiple clickfullcalendar - 多次单击后的奇怪行为
【发布时间】：2018-11-05 20:46:57
【问题描述】：

我将 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 rest 观察所有的 id 删除

你明白吗？

【问题讨论】：

标签： javascript jquery events event-handling fullcalendar

【解决方案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() {

【讨论】：