日历切换FullCalendar不按预期方式运行

Question

我正在通过Adam Shaw（http://arshaw.com/fullcalendar/）实现FullCalendar。

每个用户都有它通过JSON加载默认自己的个人日历：

$('#calendar').fullCalendar({ 
     header: { 
      left: false, 
      center: 'title', 
      right: false 
     }, 
     editable: false, 
     events: 'http://WEBSERVER.com/calendar/json/<?=$gid?>' 
    }); 

（日历/ JSON /是从MySQL查询结果产生JSON的PHP文件）

不过，也有也共享日历。可用日历显示为按钮列表如下：

<div class="btn-group" id="cal-lists"> 
     <div class="btn btn-large" id="1">John's Personal Calendar</div> 
     <div class="btn btn-large add-cal" id="2">Company Calendar</div> 
     <div class="btn btn-large add-cal" id="3">Confrence Room Calendar</div> 
    </div> 

然后我有以下的jQuery是应该充分利用FullCalendar addEventSource方法。

$("div.add-cal").click(function() 
    { 
     var json = 'http://WEBSERVER.com/calendar/json/'; 
     var cal  = $(this).attr('id'); 
     var src  = json+cal; 

     $('#calendar').fullCalendar('addEventSource', src); 

     $(this).removeClass('add-cal'); 
     $(this).addClass('rem-cal'); 
    }); 

    $("div.rem-cal").click(function() 
    { 
     var json = 'http://WEBSERVER.com/calendar/json/'; 
     var cal  = $(this).attr('id'); 
     var src  = json+cal; 

     $('#calendar').fullCalendar('removeEventSource', src); 

     $(this).removeClass('rem-cal'); 
     $(this).addClass('add-cal'); 
    }); 

所以每当用户点击

<div class="btn btn-large add-cal" id="2">Company Calendar</div> 

$（ “div.add-CAL”）。点击（函数（）应该被调用，它增加了资源，然后改变来自CSS类“add-cal”to“rem-cal”。

然后，如果再次单击该按钮，应调用$（“div.rem-cal”）。click（function（） 。

点击公司日历不断添加C ompany日历事件显示。

第一次点击时，该类会适当变为“rem-cal”，但在此之后不会更改。因此，如果用户点击了三次，则会显示三个事件。

我对jQuery/JavaScript不是很好，所以任何建议都非常感谢。

在此先感谢。

Answer 1

发生这种情况是因为您将事件处理程序绑定到尚未匹配任何内容的选择器。

您需要改用jQuery的.on()方法。

例如

$("div.btn-group") 
    .on("click", "div.add-cal", function() { 
     ... 
    }) 
    .on("click", "div.rem-cal", function() { 
     ... 
    });