Uncaught TypeError：$（...）。イベントソースを削除しようとしたときにfullCalendarが関数ではありません

Question

fullCalendarを取得して以前のイベントソースを削除し、buttonclickで新しいイベントソースにリバインドしようとしています。私は何時間も答えを探してきましたが、私が見つけた解決策のどれもうまくいかないようです。

私はフルカラーの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

だから、何とかfullCalendarウィジェットは、私が推測失わ

は、ここに私のコードです。カレンダーを作成してrebindCalendar関数で再利用する前に、DOM要素をvarに格納してみてください（$calendar = $('#calendar')など）。

Answer 2

あなたのコードは、このフィドルで正常に動作します：http://jsfiddle.net/drx389j5/

あなた#calendarが存在しない場合は、それはそれは何らかの形でDOMまたはそのIDから削除されることを意味は、（変更されたか、別のドキュメントからそれを操作しようとしています$がjQueryでないか、関数によってfullCalendarが破棄されています）。 fullcalendarの