Uncaught TypeError: $(...).fullCalendar is not a function when trying to remove event source

Question

我正在尝试让 fullCalendar 删除其先前的事件源并在 buttonclick 上重新绑定到新的事件源。我已经寻找了几个小时的答案，但我发现的解决方案似乎都不起作用。

我有一个页面，它是一个下拉菜单和 fullCalendar cal 上方的按钮。在页面加载时，日历会毫无问题地从数据库加载所有事件列表。我要实现的是一个客户端过滤器，一旦单击按钮，它将仅显示我在下拉列表中选择的名称。

将名称过滤到新的 JSON 数组中的功能运行良好，我的问题是我收到控制台错误，根据标题阻止我删除原始源并重新绑定新数组。

这是我的代码：

CSHTML：

<div class="member-filter-section">
        <div class="member-filter-container">
            <div class="staff-container">
                <p class="staff-name">Staff Member:</p>
                <div class="staff-select">
                    <select id="staff_list" multiple="multiple">
                        @foreach (var u in users)
                        {
                            <option value="@u.UserId">@u.UserName</option>
                        }
                    </select>
                </div>
            </div>
            <div class="branch-container">
                <p class="branch-name">Branch:</p>
                <div class="branch-select">
                    <select id="branch_list">
                        <option>City Center</option>
                        <option>Foxrock</option>
                        <option>Dalkey</option>
                    </select>
                </div>
            </div>
            <div id="filter" class="nav_button filter-button">Select</div>
        </div>
    </div>
    <div class="calendar-wrapper">
        <div id="calendar" class="calendar-body"></div>
    </div>

JS：

// The ajax to return a correct JSON array
        var eventsFeed = function (start, end, timezone, callback) {
            var id = @agentId;
            $.ajax({
                type: "POST",
                url: "/SystemManagement/Viewings/GetCalendarEventListings",
                data: { 'agentId' : id ,'start' : start.format(), 'end' : end.format()},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    var events = [];
                    $.each(data,
                        function(obj) {
                            var eventObject = data[obj];
                            events.push({
                                title: eventObject.Title,
                                start: eventObject.StartTime,
                                end:  eventObject.EndTime,
                                id: eventObject.Id,
                                userId: eventObject.UserId,
                                color: eventObject.AppointmentColour,
                                attendee: eventObject.Attendee,
                                location: eventObject.Location,
                                type: eventObject.AppointmentType
                            });
                        });
                    globalEvents = events;
                    callback(events);
                    events = [];
                },
                error: function() {
                    console.log('Error');
                }
            });
        }

        $(document).ready(function () {
                $('#staff_list').chosen();
                $('#branch_list').chosen();

                // Gets the JSON array to populate the calendar on page load
                $('#calendar').fullCalendar({
                    defaultView: 'agendaDay',
                    header: {
                        left: 'prev,next, today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    height: 850,
                    events: eventsFeed,
                    eventClick: function(calEvent) {
                        buildModal(calEvent.type,calEvent.location,calEvent.attendee,calEvent.color, calEvent.start, calEvent.end);
                        modal.style.display = "block";
                    }
                });

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

                           var selectedStaffIds = $("#staff_list").val();
                           var filteredEvents = [];

                           globalEvents.forEach(function(obj) {
                               if (checkIfIdIsSelected(selectedStaffIds, obj.userId)) {
                                   filteredEvents.push(obj);
                               }
                           });
                           console.log(filteredEvents);
                           rebindCalendar(filteredEvents);
                           filteredEvents.length = 0;
                       });

                function checkIfIdIsSelected(staffId, objectId) {
                    return staffId.indexOf(objectId) > -1;
                }

                function rebindCalendar(eventsArray) {
                    $('#calendar').fullCalendar('removeEventSource', eventsFeed);
                    $('#calendar').fullCalendar('addEventSource', eventsArray);
                }

Answer 1

您的代码在这个小提琴中运行良好：http://jsfiddle.net/drx389j5/

如果您的#calendar 不存在，这意味着它以某种方式从 DOM 中删除或它的 ID 已更改，或者您正试图从另一个文档（在 iframe 中）操作它，或者 $ 不是 jQuery，或者fullCalendar 被函数销毁。

Answer 2

所以我猜 fullCalendar 小部件会丢失。尝试在填充日历之前将 DOM 元素存储在 var（如 $calendar = $('#calendar')）中并在 rebindCalendar 函数中重用它。