Question

我有这个样本：

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

    ]        

  });

});

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

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

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

提前致谢！

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) {
     ...
   )}

将通过每次解锁和重新绑定来解决它

如何在fullCalendar中编辑活动？

2 个答案: