When adding events to FullCalendar they are duplicated - multiple calls made to add event without cause

I am using FullCallendar and Jquery. I made a google calendar like interface and pull events from a json file. When a user clicks on a day a div opens for them to enter info click add event and the event is added. On the second click when the user clicks add event two events are added, one on the first clicked day and the second on the selected day. On the third click 3 events are added and so on. Here is the code: 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');

});

OK, here's the solution without boolean flags :)

Instead of $(this).remove();

use

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

See documentation

Is it because you have two click events that create events? (I'm not sure where you 'button' is)

The first 'add event' is called on the dayClick:

  dayClick:function(date, allDay, jsEvent, view){
           createEvent(date, allDay, jsEvent, view, this);
        },

So is the second event created when the addEvent button is clicked?

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

Try only using the dayClick to add events and see if that works as expected and then go from there.