Question

我正在尝试使用位于模态中的按钮添加静态“训练”事件。

那么应该发生什么：在fullcalendar中点击一天或一天的范围会打开一个模态。在此模式中，有一个按钮可用于“添加培训事件”。我正在使用这种模式，因为将来可以添加其他事件。不只是培训。

模态打开正常，单击按钮会在fullcalendar中添加一个新条目。再点击一下，再次打开模态。如果现在再次单击“添加训练按钮”，则新事件将呈现两次。我在第一步中点击的那一天渲染了一个事件，第二个事件在我现在点击的那天渲染。

步骤1：点击一天打开模态

步骤2：单击模态中的按钮会添加新条目

第3步：在另一天重复步骤1

步骤4：再次单击该按钮会将事件呈现两次

Image: Step1-4

这是我的js-code。我做错了什么？

var calendar = $(calendar).fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: new Date(),
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectHelper: true,
    select: function (start, end) {
        $('#fc_create').click(); // opens modal
        $('.addTraining').on("click", function () { // clicking "add training button"
            var eventData;
            eventData = {
                title: "Training",
                start: start,
                end: end
            };
            $('#calendar').fullCalendar('renderEvent', eventData);
            $('.close').click();
        })
    },
    editable: true,
    eventLimit: true
});

Answer 1

每次＆＃34;选择＆＃34;回调运行，你正在添加另一个新的＆＃34;点击＆＃34;事件处理程序到＆＃34; addTraining＆＃34;元件（一个或多个）。所以如果＆＃34;选择＆＃34;运行3次，然后点击＆＃34;事件将被宣告3次，并且当＆＃34; addTraining＆＃34;单击，将运行相同代码的3个版本。 Javascript允许同一个事件的多个处理程序一次附加到一个元素，所以每次选择＆＃34;选择＆＃34;回调运行，没有删除它们。

要解决此问题，您可以：

1）声明处理程序一次 - 在fullCalendar声明之外执行页面加载。这会给您一个问题，因为您无法直接访问＆＃34;开始＆＃34; /＆＃34;结束＆＃34; select回调中的值。你可以通过使用全局变量（yuck）来解决这个问题，或者将值放在隐藏字段或数据属性中，然后点击处理程序可以在每次运行时找到它们。

2）使用jQuery＆＃34;＆＃34; on＆＃34;和＆＃34;关＆＃34;语法首先删除前一个处理程序，然后添加一个新处理程序，因此任何时候只有一个处理程序处于活动状态。有关详细信息和示例，请参阅http://api.jquery.com/off/和http://api.jquery.com/on/。如有必要，我可以提供样品。

Fullcalendar使用模态重复项呈现的条目添加静态事件

1 个答案: