全日历重复插入和删除

Question

我正在使用 Fullcalendar v4。当我 select 一个事件时，它会显示一个模态，其中包含有关该事件的一些信息。如果我点击远离模式，它就会消失。但是，如果我在那之后删除另一个事件，它会删除这两个事件。我之前点击过的所有事件都会发生这种情况。所以它可以一次删除多个事件。

当我第一次将事件插入数据库时，一切正常。但是当我第二次这样做时，插入脚本被调用了两次。当我插入第三个事件时，它被调用了三次。

我找不到从内存中删除旧操作的方法。我尝试调用 calendar.unselect() 方法，但无法正常工作。

这是我的 select 并删除代码。

eventClick: function(info) {
    var event = info.event;
    $.ajax({
        url:"select.php",
        type:"POST",
        data: { id: event.id },
        success: function(data) {
            console.log(data);
            $("#exampleModal1").modal();
            document.getElementById("title1").value = (data['title']); 
            document.getElementById("trainer1").value = (data['trainer']); 
        }
    });

    $('#deleteButton').on('click', function(){
        $.ajax({
            url:"delete.php",
            type:"POST",
            data: { id: event.id },
            success: function() {
                $('#exampleModal1').modal('hide');

                calendar.refetchEvents()
            }
        });
    });

    $('#annuleer').on('click', function(){
        calendar.unselect()
    });
},

Answer 1

这是因为每次发生 eventClick 时，您都会在删除按钮上创建一个新的事件处理程序。那没有必要。

在您的脚本第一次运行时定义一次处理程序。

要么在定义新的处理程序之前清除所有以前的处理程序。

否则，只要您单击该按钮，所有先前创建的处理程序都会同时运行，这解释了为什么您先前单击的其他事件也被删除。

全日历重复插入和删除

Fullcalendar duplicate insert and delete

jquery

fullcalendar