jquery - 将事件添加到 FullCalendar 时，它们会重复 - 无故多次调用添加事件

Question

我正在使用 FullCallendar 和 Jquery。我制作了一个类似谷歌日历的界面，并从 json 文件中提取事件。当用户单击某一天时，将打开一个 div 供他们输入信息，然后单击添加事件并添加该事件。当用户单击添加事件时，第二次单击时会添加两个事件，一个在第一次单击的日期，第二个在选定的日期。第三次单击时，将添加 3 个事件，依此类推。这是代码: var c = 0;

function cleanEventBubble(){
    $('#event').hide();
    $('td').removeClass('selDay');
    $('#eventDate').text('');
    $('#calEvent,input:text').val('');
}

function createEvent(date, allDay, jsEvent, View, selCell){
    //Clean the event bubble and calendar
    cleanEventBubble();
    $(selCell).addClass('selDay');
    $('#eventDate').append(date.toDateString());
    $('#event').css('left', jsEvent.pageX);
    $('#event').css('top', jsEvent.pageY);
    $('#event').show();

    $('#btnAddEvent').click(function(){addEvent(date, $('#title').val(), c)});
}

function addEvent(date, title, id){
    $.ajax({
            type:'get',
    <cfoutput>url:  '#strURL#'</cfoutput>,
            data:{
                method:'addEvent',
                user:1,
                title:title,
                allDay:'true',
                start:$.fullCalendar.formatDate( date, 'yyyy-MM-dd' )
                },
            dataType:   'json',
            success: function(data, status){alert('response: ' + data);},
            error: function(data){$('#returnMess').html(data);}

    });
    $('#calendar').fullCalendar( 'refetchEvents' )
    cleanEventBubble();
}

/**/
function removeEvent(id){
    $('#calendar').fullCalendar('removeEvents', id);
}

function updateEvent(id, title){
    var event = $('#calendar').fullCalendar('clientEvents', id);
    event.title = title;
    $('#calendar').fullCalendar('updateEvent', event);
}


$(document).ready(function() {
    //Create JQuery connection to obj
    $('#event').hide();
    //Make event bubble draggable
    $('#event').draggable();

    $('#evBubbleClose').click(cleanEventBubble);
    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
        // put your options and callbacks here date, allDay, jsEvent, view
        dayClick:function(date, allDay, jsEvent, view){
           createEvent(date, allDay, jsEvent, view, this);
        },
        <cfoutput>events: '#strURL#'+'?wsdl&method=getEvents'</cfoutput> ,
        theme: true,
        header: {left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, 
        editable:true
    });

    //$('#calendar').fullCalendar('renderEvents');

});

Answer 1

好的，这是没有 bool 标志的解决方案:)

而不是$(this).remove();

使用

$('#calendar').fullCalendar( 'removeEvents', event.id );

See documentation