Fullcalendar dayClick 发送多个 ajax 请求

Question

我将 Fullcalendar v3 与 Django 一起使用。我对 dayClick 有疑问。当我单击某天时，会打开一个模式，在提交时会向后端发送 ajax 请求。问题是，当我点击然后在另一天点击时，它会发送两个 ajax 请求，依此类推。

我搜索了这个问题，我发现一个事件处理程序在一天点击时存储请求，然后提交所有请求。但我无法解决我的问题。

这里是dayclick代码：

       dayClick: function(date) {
            var cell = $(this);
            weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
            clicked_date = new Date(date);
            var clicked_day_name = weekday[clicked_date.getDay()];
            $('#schedule_modal').on('show.bs.modal', function (event) {
                modal = $(this)
                modal.find('#schedule_modal_title').text('Schedule your ' + clicked_day_name)
                modal.find('#only_this_day').text('Only this ' + clicked_day_name)
                modal.find('#include_other_days').text('With upcoming ' + clicked_day_name + 's to: ')
            });
            $('#schedule_modal').modal('show'); 
            $('.dropdown-menu').addClass('d-none');

            $('#submit_day_schedule').on('click', function () {
                if ($('#only_this').is(':checked')) {
                    schedule_option = $('#only_this').val();
                } else {
                    schedule_option = $('#schedule_option_date').val();
                }
                data = {
                    'day_schedule': $('#day_schedule_select option:selected').val(),
                    'day': moment(date).format('YYYY-MM-DD'),
                    'schedule_option': schedule_option,
                };
                $('#schedule_modal').modal('hide');
                $.ajax({
                    headers: {
                        'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()
                    },
                    type: 'POST',
                    url: "{% url 'test_url' option=option %}",
                    data: data,
                    success: function (response) {
                        cell.css('background-color', 'red');
                        $('#day_schedule_form').trigger('reset');
                        showNotification('bg-success', response.message);
                    },
                    error: function (response) {
                        showNotification('bg-warning', response.message);
                    } 
                });
            });
        },

Answer 1

这个：

$('#schedule_modal').on('show.bs.modal', function (event) {

...每次单击一天时都会为“已显示”事件创建一个新的事件处理程序。由于您永远不会删除任何先前的事件处理程序，这意味着每次显示模态时它们都会运行。因此，如果您在一天中单击 3 次，则会注册“已显示”事件处理程序的 3 个副本，因此每当显示模态时，该函数将运行 3 次。

和

一样

$('#submit_day_schedule').on('click', function () {

也是。使用 .off() 删除任何以前的处理程序，或者在 fullcalendar 之外注册一次处理程序。

Fullcalendar dayClick 发送多个 ajax 请求

Fullcalendar dayClick sends multiple ajax requests

jquery

fullcalendar

fullcalendar-3