当更改视图时，Fullcalendar eventClick不起作用

Question

我在一个带有phonegap的应用程序中使用fullcalendar。我有两个外部按钮来改变视图(月或周)，默认视图是月。

nova.touch.bindClick("#btn_week", function() {
        $('#calendar').fullCalendar('changeView', 'basicWeek');
        $('#calendar').fullCalendar( 'render' );            
    });
nova.touch.bindClick("#btn_month", function() {
        //$('#calendar_week').hide();
        $('#calendar').fullCalendar('changeView', 'month');
        $('#calendar').fullCalendar('render');
    });

我有事件和事件点击:

$('#calendar').fullCalendar({
                theme: false,
                defaultView: 'month',
                columnFormat: 'ddd',
                firstDay: 1,
                editable: true,
                height: $('#calendar_content').height(),
                header: {
                        right: 'today',
                        left: 'title'
                        //center: 'month,basicWeek'
                    },
                events: [                       
                    {
                        title: 'N',
                        start: new Date(y, m, d-8)
                    },
                    {
                        title: 'L',
                        start: new Date(y, m, d+1)
                    },
                    {
                        title: 'L2',
                        start: new Date(y, m, d-15)
                    }
                ],
                eventClick: function(calEvent, jsEvent, view) {
                    alert('Event: ' + calEvent.title);
                    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                    alert('View: ' + view.name);
                   $('#calendar').fullCalendar('updateEvent', calEvent);
                }

事件点击第一次运行良好。我点击事件，就会看到警报。但是当我用外部按钮改变视图时，如果我在事件中触摸/点击，警报不会显示。

完整日历版本为:fullcalendar-2.3.2

Answer 1

Phonegap不能很好地处理fullcalendar中的事件。我找到解决办法了。

我已经创建了一个函数，该函数创建具有不同参数(日期，视图类型)的日历，并将触摸事件(如果放在该函数之外，事件不起作用)放在该函数中，当我使用外部按钮更改日历或视图中的日期时，我销毁日历并使用新的日期和视图重新创建。

这是创建日历函数的代码:

openCalendar: function(view, date_open, data){
    var me = this;          
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();     
    $('#calendar').fullCalendar({           
        theme: false,
        defaultView: view,
        columnFormat: 'ddd',
        defaultDate: date_open,
        firstDay: 1,
        editable: true,
        height: $('#calendar_content').height(),
        header: {
                right: 'today',
                left: 'title'
                //center: 'month,basicWeek'
            },
        events: [
            {
                title: 'E',
                start: new Date(y, m, 1)
            },
            {
                title: 'N',
                start: new Date(y, m, d-5)
            },
            {
                title: 'L',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                title: 'R',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'NS',
                start: new Date(y, m, d-7)
            },
            {
                title: 'N',
                start: new Date(y, m, d-8),
                imagen: 'yes'
            },
            {
                title: 'L',
                start: new Date(y, m, d+1)
            },
            {
                title: 'L2',
                start: new Date(y, m, d-15)
            }
        ]
    });
     nova.touch.bindClick(".fc-event-container",function(){
         me.firstDialog(); //open dialog
        });
     $('.fc-day').on( 'touchstart', function ( startEvent ) {           
         me.firstDialog();
    });
},

在初始调用中，我这样做:

var date = new Date();
me.openCalendar('month', date);

如果我改变了一些东西:

 nova.touch.bindClick("#btn_week", function() {
        var current_date = $('#calendar').fullCalendar('getDate');            
        $('#calendar').fullCalendar('destroy');         
        me.openCalendar('basicWeek', current_date);
    });
    nova.touch.bindClick("#btn_month", function() {
        var current_date = $('#calendar').fullCalendar('getDate');
        $('#calendar').fullCalendar('destroy');
        me.openCalendar('month', current_date);            
    });

当我触摸事件时，对话框或警报会正确打开。

Answer 2

我不熟悉phonegap，但我可以猜到这里发生了什么。

nova.touch.bindClick("#btn_week"...绑定到一个元素，并且在重新呈现日历时变得无用，因为该元素不再存在。

解决方案1

使用委托事件侦听器。我不知道这个是否存在于phonegap中。

解决方案2

在eventAfterAllRender中重新绑定它。

之类的东西

eventAfterAllRender: function(){
    nova.touch.bindClick("#btn_week", function() {
        $('#calendar').fullCalendar('changeView', 'basicWeek');
        $('#calendar').fullCalendar( 'render' );            
    });
    nova.touch.bindClick("#btn_month", function() {
        //$('#calendar_week').hide();
        $('#calendar').fullCalendar('changeView', 'month');
        $('#calendar').fullCalendar('render');
    });
},