日历切换为“完整日历”未按预期运行

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?>'
    });

（calendar/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"）.click（function（） 应该被调用，它会添加资源，然后将 CSS 类从 "add-cal" 更改为 "rem-cal"。

然后，如果再次单击该按钮，则应调用 $（"div.rem-cal"）.click（function（）。事实并非如此。

单击"公司日历"会持续将"公司日历"事件添加到显示中。

第一次单击它时，类会适当地更改为"rem-cal"，但之后不会更改。因此，如果用户单击它三次，则会显示三个事件实例。

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

提前谢谢。

Answer 1

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

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

例如

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