在全日历中删除事件后清除 Post 数据

Question

我正在使用全日历。当我单击某个事件时，会打开一个模式，您可以在其中选择删除该事件。

当我单击删除时，事件被删除并启动了一个 php-脚本，它将在 ftp 上创建一个文件以与另一个程序同步。这很好用。当我点击删除下一个事件时。 php 脚本创建两个文件。（又是第一个，又是一个新的。

当我在第三个事件上单击删除时，php 脚本会创建 3... 等等。如果我在删除两个事件之间刷新页面没有问题。

我使用 $id = $_POST['id']; 从 php 脚本中的事件中获取 ID。

这是我在全日历中使用的代码：

eventClick:  function(event, delta) {
                $('#modalTitle').html(event.title);
                $('#modalBody').html(   'Start: ' + moment(event.start).format('h:mm') + '</br>' +
                                        'Stop: ' + moment(event.stop).format('h:mm') + '</br></br>' +
                                        'Locatie: ' + event.location + '</br></br>' +
                                        'Info: </br>' + event.description + '</br></br>' +
                                        '<b>Debug info:</b> </br>' +
                                        '           Event id :' + event.id +'</br>' +
                                        '           Resource id :' + event.resourceId +'</br>' +
                                        '           Last modified :' + moment(event.datelastmodified).format('YYYY-MM-DD h:mm:ss')
                                    );
                $('#eventUrl').attr('href',event.url);
                $("#deleteEventBtn").click(function() { 
                                                        $('#calendar').fullCalendar('removeEvents',event._id); //external event, therefore using event._id
                                                        $.ajax({
                                                                url: 'delete_events.php',
                                                                data: '&id='+ event.id ,
                                                                type: "POST",
                                                                success: function(json) {   //refresh calendar on success
                                                                                        $('#calendar').fullCalendar( 'refetchEvents' );
                                                                                            //alert("Updated Successfully");
                                                                                        },
                                                                error: function(json)   {   //refresh calendar on error
                                                                                        $('#calendar').fullCalendar( 'refetchEvents' );
                                                                                        },
                                                                statusCode: {404: function() {alert( "delete_events.php niet gevonden. De wijziging wordt niet opgeslagen." )}},
                                                                });
                                                    });
                $('#DeleteEventModal').modal();
        },

我又发现了一个问题。当我点击一个事件时，模式打开。当我单击 "close" 关闭模式时，单击下一个事件并选择 "delete" 两个事件都被删除。

编辑： 我想我需要一些这样的代码：

<script>
$(function(){
$('#DeleteEventModal').on('hidden.bs.modal', function () {
    $('#DeleteEventModal .modal-body').html('');
});})
</script>

这段代码删除了 html-body，我需要它来清除事件 ID。每次我单击事件时，event.id 都会添加到缓存中（？）。当我点击删除。每个具有缓存 event.id 的事件都将被删除，而不是仅删除最后一个单击的事件。

Answer 1

我找到了问题的解决方案。每次在日历中单击事件时，都会将一个新的处理程序绑定到 #deleteEventBtn。因此，当我点击 "delete" 时，执行了多个处理程序。

工作代码：

eventRender:  function(event, element) {
                element.attr('href', 'javascript:void(0);');
                element.click(function() {
                    $('#modalTitle').html(event.title);
                    $('#modalBody').html(   'Start: ' + moment(event.start).format('h:mm') + '</br>' +
                                            'Stop: ' + moment(event.stop).format('h:mm') + '</br></br>' +
                                            'Locatie: ' + event.location + '</br></br>' +
                                            'Info: </br>' + event.description + '</br></br>' +
                                            '<b>Debug info:</b> </br>' +
                                            '           Event id :' + event.id +'</br>' +
                                            '           Resource id :' + event.resourceId +'</br>' +
                                            '           Last modified :' + moment(event.datelastmodified).format('YYYY-MM-DD h:mm:ss')
                                        );
                    $('#eventUrl').attr('href',event.url);
                    $("#deleteEventBtn").off('click').on('click', function(e) {
                                                            //$('#calendar').fullCalendar('removeEvents',event._id); //external event, therefore using event._id
                                                            $.ajax({
                                                                    url: 'delete_events.php',
                                                                    data: '&id='+ event.id ,
                                                                    type: "POST",
                                                                    success: function(json) {   //refresh calendar on success
                                                                                            $('#calendar').fullCalendar( 'refetchEvents' );
                                                                                                //alert("Updated Successfully");
                                                                                            },
                                                                    error: function(json)   {   //refresh calendar on error
                                                                                            $('#calendar').fullCalendar( 'refetchEvents' );
                                                                                            },
                                                                    statusCode: {404: function() {alert( "delete_events.php niet gevonden. De wijziging wordt niet opgeslagen." )}},
                                                                    });
                    });
                    $('#DeleteEventModal').modal();
                });
        },

在全日历中删除事件后清除 Post 数据

Clear Post data after event delete in fullcalendar

html

javascript

php

fullcalendar