【发布时间】：2018-06-05 09:51:40
【问题描述】：
每当我尝试更改标题时，它第一次工作正常，但如果我尝试更改另一个事件的标题而不刷新，之前更改的事件标题和当前事件标题都会更改。
您可以在下面找到已发布的完整日历的自定义 JavaScript 文件。但是当我更改事件的标题并手动刷新时，它工作正常。
function init_calendar() {
if( typeof ($.fn.fullCalendar) === 'undefined'){ return; }
var date = new Date(),
d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear(),
started,
categoryClass;
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
selectable: true,
selectHelper: true,
eventLimit: true,
select: function(start, end, allDay)
{
$('#fc_create').click();
started = moment(start).format('YYYY/MM/DD, h:mm:ss A');
ended = moment(end).format('YYYY/MM/DD, h:mm:ss A');
$(".antosubmit").on("click", function() {
var title = $("#title").val();
categoryClass = $("#event_type").val();
if (title) {
var start = moment(start).format('YYYY/MM/DD HH:mm:ss');
var end = moment(end).format('YYYY/MM/DD HH:mm:ss')
$.ajax({
url:"add.php",
type:"POST",
data:{title:title, start:started, end:ended},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Added Successfully");
}
})
}
$('#title').val('');
calendar.fullCalendar('unselect');
$('.antoclose').click();
return false;
});
},
editable:true,
eventDrop:function(event)
{
var start = moment(event.start).format('YYYY/MM/DD HH:mm:ss');
var end = moment(event.end).format('YYYY/MM/DD HH:mm:ss');
var title = event.title;
var id = event.id;
$.ajax({
url:"event_change.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Updated");
}
});
},
editable:true,
eventResize:function(event)
{
var start = moment(event.start).format('YYYY/MM/DD HH:mm:ss');
var end = moment(event.end).format('YYYY/MM/DD HH:mm:ss');
var title = event.title;
var id = event.id;
$.ajax({
url:"event_change.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function(){
calendar.fullCalendar('refetchEvents');
alert('Event changed');
}
})
},
eventClick: function(calEvent, jsEvent, view) {
$('#fc_edit').click();
var id = calEvent.id;
categoryClass = $("#event_type").val();
$(".antoremove2").on("click", function(){
categoryClass = $("#event_type").val();
$.ajax({
url:"remove.php",
type:"POST",
data:{id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Removed");
}
})
});
$(".antosubmit2").on("click", function() {
calEvent.title = $("#title2").val();
var id = calEvent.id;
var title = calEvent.title;
var start = moment(calEvent.start).format('YYYY/MM/DD HH:mm:ss');
var end = moment(calEvent.end).format('YYYY/MM/DD HH:mm:ss');
console.log(title);
console.log(id);
console.log(start);
console.log(end);
$.ajax({
url:"event_change.php",
type:"POST",
data:{title:title,start:start, end:end, id:id},
success:function(){
calendar.fullCalendar('refetchEvents');
alert('Event changed');
}
});
calendar.fullCalendar('updateEvent', calEvent);
$('.antoclose2').click();
});
calendar.fullCalendar('unselect');
},
editable: true,
events:'view.php',
});
};
$(document).ready(function() {
init_calendar();
});
【问题讨论】：
-
这是因为每次“eventClick”运行时，都会向“antosubmit2”添加一个新的事件处理程序。这样做不会删除任何以前添加的处理程序代码，它只是添加另一个版本。因此，下次您单击“antosubmit2”按钮时，它将运行该按钮（或按钮）的 all 附加事件处理程序，因此它将更新所有先前选择的事件的标题。您需要重构您的代码，以便您只为每个按钮声明一个事件处理程序，但确保它可以访问正确的数据以了解每次单击它时应该处理的事件 ID。
-
我认为您的“添加”和“删除”功能也会遇到同样的问题
-
问题仅在于 eventClick 中的删除和编辑，添加工作正常。
-
嗯，你确定，因为
$(".antosubmit").on("click", function() {会在你多次选择时执行多次，所以在这种情况下，你最终会多次添加相同的事件。在日历视图上可能不明显，但您应该在数据库中检查它。我强烈建议重构此代码以及您的编辑和删除代码。
标签： events fullcalendar fullcalendar-scheduler fullcalendar-3 fullcalendar-2