javascript - 当我在完整日历中创建第二个事件时，会创建两个事件

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 函数时都会添加一个新的 $("#btnSave").click() 事件监听器 (select: function(start, end) {....}) 被调用。

您可以使用 jquery .one(...) 来解决这个问题功能。这是一个例子:

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

It seems to be working