0

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>

次に、FullCalendar addEventSource メソッドを利用することになっている次の jQuery があります。

    $("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」に変更されますが、その後は変更されません。したがって、ユーザーが 3 回クリックすると、イベントの 3 つのインスタンスが表示されます。

私は jQuery / JavaScript があまり得意ではないので、アドバイスをいただければ幸いです。

前もって感謝します。

4

1 に答える 1

1

これは、まだ何も一致していないセレクターにイベント ハンドラーをバインドしているためです。

.on()代わりに jQuery のメソッドを使用する必要があります。

例えば

$("div.btn-group")
    .on("click", "div.add-cal", function() {
        ...
    })
    .on("click", "div.rem-cal", function() {
        ...
    });
于 2012-04-26T18:03:01.417 に答える