如何在fullCalendar中编辑事件？

Question

I have this sample:

link

CODE HTML:

<div id='calendar'></div>
    <div class="cont" style="display:none">
    <button type="button" class="btn btn-primary btn-save" id="edit">Save</button>
​​    <input id="required-input" type="text" name="firstname" id="firstname" placeholder="John">

CODE JS:

   $(function() { // document ready

  var calendar=$('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-11-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    defaultView: 'agendaDay',
    selectable: true,   //permite sa selectezi mai multe zile
    selectHelper: true,  //coloreaza selctia ta


    eventClick:  function(event, jsEvent, view) {
                $(".cont").show();
                $( "#edit" ).click(function(e) {
                     e.preventDefault();
                     alert(event._id);
                     event.title = $("#required-input").val();
                     $('#calendar').fullCalendar('updateEvent', event);
                     $(".cont").hide();
                });

        //  event.title = "CLICKED!";


    },
    select: function(start, end, allDay)  
            {

                    var title = "test"
                    if(title)
                    {
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    //allDay: allDay
                                },

                        true // make the event "stick"
                        );
                    }   


                calendar.fullCalendar('unselect');  
            },

     events: [
        {

            title  : 'titleEvent',
            start  : '2014-11-12',
             allDay : false // will make the time show
        },

    ]        

  });

});

Unfortunately at this time to edit all events, I just want the current event.

The reason this happens? Because button click?

I put an alert and run twice, you can test the link above and see more clearly.

Thanks in advance!

Answer 1

The problem is every time you click on an event a new click handler is getting added to the button, one possible solution is to use .off() to remove the current handler and add a new handler.

Another is to can use .data() api to pass the event instance to the click handler

 $(function() { // document ready var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: '2014-11-12', editable: true, eventLimit: true, // allow "more" link when too many events defaultView: 'agendaDay', selectable: true, //permite sa selectezi mai multe zile selectHelper: true, //coloreaza selctia ta eventClick: function(event, jsEvent, view) { $(".cont").show().data('event', event); }, select: function(start, end, allDay) { var title = "test" if (title) { calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, //allDay: allDay }, true // make the event "stick" ); } calendar.fullCalendar('unselect'); }, events: [{ title: 'titleEvent', start: '2014-11-12', allDay: false // will make the time show }, ] }); $("#edit").click(function(e) { e.preventDefault(); var title = $("#required-input").val().trim(); if (!title) { return; } var event = $(".cont").data('event'), isAdd = !event; if (isAdd) { event = {}; event.start = '2014-11-12'; } event.title = title; if (isAdd) { $('#calendar').fullCalendar('renderEvent', event, true); } else { $('#calendar').fullCalendar('updateEvent', event); } $(".cont").hide().removeData('event'); }); $("#add").click(function(e) { $(".cont").show(); }); }); 

 <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js" ie.="" data-type=""></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.js "></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <div id='calendar'></div> <div class="cont" style="display:none"> <button type="button" class="btn btn-primary btn-save" id="edit">Save</button> <input id="required-input" type="text" name="firstname" id="firstname" placeholder="John" /> </div> <button type="button" class="btn btn-primary btn-save" id="add">Add</button> 

Answer 2

you are getting a memory leak, by binding the edit click event everytime you click on an event

   $( "#edit" ).off('click').on('click', function(e) {
     ...
   )}

will solve it, by unbinding and rebinding every time