Javascript 如何在fullCalendar中编辑事件？

我有这个样本：

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

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

    ]        

  });

});

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

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

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

---

提前谢谢

每次单击事件时都会绑定edit click事件，从而导致内存泄漏

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

---

将解决此问题，方法是每次出现内存泄漏时解除绑定并重新绑定，每次单击事件时绑定edit click事件

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

---

将通过每次解除绑定和重新绑定来解决此问题。

问题是，每次单击事件时，都会向按钮添加新的单击处理程序，一种可能的解决方案是使用

.off（）

删除当前处理程序并添加新处理程序

另一种方法是使用

.data（）

api将事件实例传递给click处理程序

$（函数（）{//文档准备就绪
var calendar=$（“#calendar”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
默认日期：“2014-11-12”，
是的，
eventLimit:true，//当事件太多时允许“更多”链接
defaultView:'agendaDay'，
可选：true，//permite sa selectezi mai multe zile
selectHelper:true，//coloreaza selectia ta
eventClick:函数（事件、jsEvent、视图）{
$（“.cont”）.show（）.data（'event'，event）；
},
选择：功能（开始、结束、全天）{
var title=“测试”
如果（标题）{
日历。完整日历（'renderEvent'{
标题:标题,，
开始：开始，
完:完,，
//全天
},
true//使事件“持续”
);
}
日历。完整日历（“取消选择”）；
},
活动：[{
标题：“标题事件”，
开始：“2014-11-12”，
全天：假//将显示时间
},
]
});
$（“#编辑”）。单击（功能（e）{
e、 预防默认值（）；
var title=$（“#必需输入”）.val（）.trim（）；
如果（！标题）{
返回；
}
变量事件=$（“.cont”）.data（'event'），
isAdd=！事件；
如果（isAdd）{
事件={}；
event.start='2014-11-12'；
}
event.title=标题；
如果（isAdd）{
$（“#calendar”）.fullCalendar（'renderEvent'，event，true）；
}否则{
$（“#日历”）.fullCalendar（'updateEvent'，event）；
}
$（“.cont”）.hide（）.removeData（'event'）；
});
$（“#添加”）。单击（函数（e）{
$（“.cont”）.show（）；
});
});

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

另一种方法是使用
.data（）
api将事件实例传递给click处理程序


$（函数（）{//文档准备就绪
var calendar=$（“#calendar”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
默认日期：“2014-11-12”，
是的，
eventLimit:true，//当事件太多时允许“更多”链接
defaultView:'agendaDay'，
可选：true，//permite sa selectezi mai multe zile
selectHelper:true，//coloreaza selectia ta
eventClick:函数（事件、jsEvent、视图）{
$（“.cont”）.show（）.data（'event'，event）；
},
选择：功能（开始、结束、全天）{
var title=“测试”
如果（标题）{
日历。完整日历（'renderEvent'{
标题:标题,，
开始：开始，
完:完,，
//全天
},
true//使事件“持续”
);
}
日历。完整日历（“取消选择”）；
},
活动：[{
标题：“标题事件”，
开始：“2014-11-12”，
全天：假//将显示时间
},
]
});
$（“#编辑”）。单击（功能（e）{
e、 预防默认值（）；
var title=$（“#必需输入”）.val（）.trim（）；
如果（！标题）{
返回；
}
变量事件=$（“.cont”）.data（'event'），
isAdd=！事件；
如果（isAdd）{
事件={}；
event.start='2014-11-12'；
}
event.title=标题；
如果（isAdd）{
$（“#calendar”）.fullCalendar（'renderEvent'，event，true）；
}否则{
$（“#日历”）.fullCalendar（'updateEvent'，event）；
}
$（“.cont”）.hide（）.removeData（'event'）；
});
$（“#添加”）。单击（函数（e）{
$（“.cont”）.show（）；
});
});

拯救
Add
什么是
#edit
元素？#edit是按钮，你能在code Html中看到什么是
#edit
元素吗？#edit是按钮，你能在code Html中看到取消绑定单击，你也可以这样做：$（“#edit”）。取消绑定（'click'）。绑定（'click'，函数（e）{理想情况下，您希望将click事件绑定到#edit按钮，从事件click handler中取出要解除绑定的click，您也可以这样做：$（“#edit”）。解除绑定（'click'）。绑定（'click'，函数（e）{理想情况下，您希望将click事件绑定到#edit按钮，从event click Handler中取出非常感谢，您的示例非常棒。您能演示如何使用相同的表单添加事件吗？它做了什么，但它可以进行“选择”？现在添加是在固定日期进行的非常感谢，您的示例非常精彩。您能演示如何使用相同的表单添加事件吗？它做了什么，但它可以进行“选择”？现在添加是在固定日期进行的