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

时间:2018-11-14 13:45:20

标签: javascript calendar 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');

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

当我选择一个事件就可以了,当我重复,四倍等后, 为什么?我不明白为什么会这样

1 个答案:

答案 0 :(得分:0)

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

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

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

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