Wenn ich ein zweites Ereignis im Vollkalender erstelle, werden zwei Ereignisse erstellt.

Question

Wenn Sie ein Ereignis erstellen, funktioniert es perfekt, aber wenn Sie mehr erstellen, erstellt das System alle Ereignisse vor + der, die Sie gerade erstellen.

<div id='wrap'> 


<div id="fullCalModalModify" class="modal fade"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button> 
      <a>Title:</a><input id="modalTitleModify" class="modal-title" autofocus><a>Avec:</a><input id="modalClientModify" class="modal-title"> 
     </div> 

     <div class="modal-footer"> 
      <button class="alert alert-success" id="btnSave"><a target="_blank">Save</a></button> 
     </div> 
    </div> 
</div> 

    <div id="calendar"></div> 
    <div style='clear:both'></div> 
</div> 

$(document).ready(function() { 
var title; 
var client; 
var eventData; 
/* initialize the external events------------------------------*/ 
$('#external-events .fc-event').each(function() { 
// store data so the calendar knows to render an event upon drop 
$(this).data('event', { 
title: $.trim($(this).text()), // use the element's text as the event title 
stick: true // maintain when user navigates (see docs on the renderEvent method) 
}); 

    // make the event draggable using jQuery UI 
$(this).draggable({ 
     zIndex: 999, 
     revert: true,  // will cause the event to go back to its 
     revertDuration: 0 // original position after the drag 
    }); 
}); 

$('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay,listMonth' 
    }, 
    defaultDate: '2016-09-12', 
    droppable: true, // this allows things to be dropped onto the calendar 
    navLinks: true, // can click day/week names to navigate views 
    businessHours: true, // display business hours 
    editable: true, 
    selectable: true, 
    selectHelper: true, 
    select: function(start, end) { 
     $('#modalTitleModify').val(""); 
     $('#modalClientModify').val(""); 
     $('#fullCalModalModify').modal(); 
     $("#btnSave").click(function() {  
      title = $('#modalTitleModify').val(); 
      client = $('#modalClientModify').val(); 
      description = $('#modalDescriptionModify').val(); 
      if (title) {   
       eventData = { 
        title: title, 
        clientName: client, 
        start: start, 
        end: end 
       }; 
       $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
       $("#fullCalModalModify").modal('hide'); 
      } 
    }); 
    $('#calendar').fullCalendar('unselect'); 
    }, 
    loading: function(bool) { 
    $('#loading').toggle(bool); 
    /*end of section separate windows */ 
     },   
    }); 
}); 

http://jsfiddle.net/prodeinfo/x4dbs8qz/

Ich verstehe nicht, warum, können Sie mir bitte helfen?

Answer 1

Ich denke, das Problem ist, dass Sie einen neuen $("#btnSave").click() Event-Listener jedes Mal hinzufügen, wenn die select-Funktion (select: function(start, end) {....}) aufgerufen wird.

Sie können das beheben, indem Sie die Funktion jquery .one(...) verwenden. Hier ein Beispiel:

select: function(start, end) { 
    .... 
    $("#btnSave").one("click", function() { 
     .... 
    } 
} 

It seems to be working