Fullcalendar add static events using modal duplicates rendered entries - modal-dialog

Question

I am trying to add static "Training"-events using a button located in a modal.
So what should happen: Clicking on a day or a range of days in fullcalendar opens a modal. In this modal a button is available to "add a training event".
I am using this modal because it shall be possible to add other events in future. Not just trainings.
The modal opens fine and clicking the button adds a new entry in fullcalendar. Clicking on a further day opens the modal again. If now the "add a training button" is clicked again, the new event is rendered twice. One event is rendered on the day i have clicked in the first step, the second is rendered at the day i have clicked now.
Step1:
clicking a day opens the modal
Step2:
clicking the button in the modal adds a new entry
Step3: repeating step1 on another day
Step4:
clicking the button again renders the event twice
Image: Step1-4
This is my js-code. What i am doing wrong?
var calendar = $(calendar).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
select: function (start, end) {
$('#fc_create').click(); // opens modal
$('.addTraining').on("click", function () { // clicking "add training button"
var eventData;
eventData = {
title: "Training",
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData);
$('.close').click();
})
},
editable: true,
eventLimit: true
});

Answer 1

Every time your "select" callback runs, you are adding another new "click" event handler to the "addTraining" element(s). So if "select" runs 3 times, then the "click" event will be declared 3 times, and when "addTraining" is clicked, 3 versions of the same code will run. Javascript allows multiple handlers for the same event to be attached to an element at once, so you are just building them up each time the "select" callback runs, without ever removing them.
To fix this you can either:
1) Declare the handler once - do it page load, outside your fullCalendar declaration. This will give you a problem in that you won't have direct access to the "start"/"end" values from the select callback. You can get round this by using global variables (yuck) or perhaps putting the values in hidden fields or data- attributes somewhere suitable, and then the click handler can find them each time it runs.
2) Using jQuery's "on" and "off" syntax to first remove the previous handler, and then add a new one, so only one handler is ever active at any one time. See http://api.jquery.com/off/ and http://api.jquery.com/on/ for more details and examples. I can provide a sample if necessary.