时间戳

首页 > 解决方案 > FullCalendar 事件在第一个偶数之后重复

javascript - FullCalendar 事件在第一个偶数之后重复

问题描述

当我选择一个事件时没问题，在我被复制、四倍等之后。为什么？我不明白为什么会这样

这是我在 javascript 中的代码

    $('#calendar').fullCalendar({
        snapDuration: '00:30:00',
        selectable: true,
        aspectRatio: 1.8,
        scrollTime: '08:00', // undo default 6am scrollTime
        resources: '{!! route('fullcalendar.roomall') !!}',
        events: '{!! route('fullcalendar.bookingall') !!}',
        select: function( start, end, jsEvent, view, resourceId) {

            $('#event-modal').find('input[name=title]').val('');
            // set values in inputs
            $('#event-modal').find('input[name=evtStart]').val(
                    start.format('YYYY-MM-DD HH:mm:ss')
            );
            $('#event-modal').find('input[name=evtEnd]').val(
                    end.format('YYYY-MM-DD HH:mm:ss')
            );
            // show modal dialog
            $('#event-modal').modal('show');
            /*
             bind event submit. Will perform a ajax call in order to save the event to the database.
             When save is successful, close modal dialog and refresh fullcalendar.
             */

            $("#event-modal").on('click','.save', function(event) {
                event.preventDefault();
                var id = resourceId['id'];
                var roomName = resourceId['title'];
                var title = $('#title').val();
                var start = $('#evtStart').val();
                var end = $('#evtEnd').val();
                $('#event-modal').modal('hide');

                $.ajax({
                    url: '{{ route('events.save') }}',
                    data: $("#event-modal").serialize(),
                    type: 'post',
                    dataType: 'json',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'title': title,
                        'start': start,
                        'end': end,
                        'roomId': id,
                        'roomName': roomName
                    },
                    success: function(response) {
                        callback(response);
                        $("#calendar").fullCalendar( 'refetchEvents');

                    }
                });
            });
        },
});

当我选择一个事件时没问题，在我被复制、四倍等之后。为什么？我不明白为什么会这样

标签： javascriptcalendarfullcalendar

解决方案

问题是因为每次“选择”回调运行时，您不断向“保存”按钮添加越来越多的“单击”事件处理程序。

$("#event-modal").off("click", ".save").on('click','.save', function(event) {

应该解决您的问题（.off()从元素中删除指定的事件处理程序）。

这种性质的问题一直被问到。您需要了解向元素添加事件处理程序并不会删除之前的事件处理程序，它们可以一起存在，并且它们都将继续响应事件，直到您将它们删除。

推荐阅读