當我在完整的日曆中創建第二個事件時，創建兩個事件

Question

如果您創建一個事件，它可以很好地工作，但是當您創建更多事件時，系統會在您現在創建的事件之前創建所有事件。

<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/

我不明白爲什麼，你能幫幫我嗎？

Answer 1

我認爲問題在於每次調用select函數（select: function(start, end) {....}）時，都會添加新的$("#btnSave").click()事件偵聽器。

你可以通過使用jquery .one(...)函數來解決這個問題。這裏有一個例子：

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

It seems to be working