更改视图时，完整日历eventClick无法工作

Question

我在phonegap的应用程序中使用完整的日历。我有两个外部按钮来更改视图(月或周)，默认视图是月份。

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);

                }

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

完整日历版本是:满日历-2.3.2

Answer 1

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

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

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

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