如何在全日历中编辑事件

Question

我有这个样本：

链接

代码网页：

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

代码 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
        },
    ]        
  });
});

不幸的是，此时要编辑所有事件，我只想要当前事件。

发生这种情况的原因是什么？因为按钮点击？

我放了一个警报并运行了两次，您可以测试上面的链接并看得更清楚。

提前感谢！

Answer 1

问题是每次单击事件时，都会向按钮添加新的单击处理程序，一种可能的解决方案是使用 .off() 删除当前处理程序并添加新处理程序。

另一种是可以使用.data() api 将事件实例传递给点击处理程序

$(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

每次

单击事件时都会绑定编辑单击事件，从而获得内存泄漏

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

将解决它，每次都解除绑定和重新绑定