Question

我在jquery对话框中打开一个日历插件。

我遇到的问题是每当我关闭对话框并重新打开时，我的日历事件onDayClick将触发两次。如果重复将触发3次，依此类推。

<div id="show_calendar">
    <div class="custom-calendar-wrap">
    <div class="custom-header clearfix">
         <nav>
    <span id="custom-prev" class="custom-prev"></span>
    <span id="custom-next" class="custom-next"></span>
         </nav>
    </div>
    <div id="calendar" class="fc cw-calendar-container"></div>
    </div>
    </div>
</div>


<script>
$(function(){
    //OpenCalendar
    $('.open-calendar').on('click', function() {
        var cal = calendar_wall();
        $('#show_calendar').dialog('open');

        return false;
    });
});

$('#show_calendar').dialog({
    width:'75%', 
    height:'800', 
    title:'Select Tour Date', 
    autoOpen:false, 
    modal:true ,
    open: function(event, ui) {
    },      
    buttons: {
    'Submit' : function() {  
        $( this ).dialog( "close" );
    }
} });

function calendar_wall(){
    var cal = $( '#calendar' ).calendarWall( {
                onDayClick : function( $el, dateProperties ) {
                console.log("A");
                });

    //Nav
    $( '#custom-next' ).unbind("click").bind("click", function() { 
        console.log("B");
    } );
    $( '#custom-prev' ).unbind("click").bind("click", function() {
        console.log("C");
    } );

    return cal;
}
</script>

在点击事件之外调用calendar_wall()不会导致重复触发。但我的网页是ajax风格，所以打开日历按钮会点击很多时间，最终因堆叠而变慢。

::::: UPDATE :::::

好的，我刚发现重新绑定下一个和上一年按钮将解决问题。现在剩下的是onDayClick事件仍然会重复触发。我在下面添加了插件代码。

$.CalendarWall.defaults = {
            monthNames : shortMonthName,
            dayNames  : DayName,
            onDayClick : function( $el, dateProperties ) { return false; }
};

$.CalendarWall.prototype = {    
...
...

_initEvents : function() {
    var self = this;
        //How do i add unbind and bind here??
    this.$el.on( 'click.calendarWall', 'td', function() {

        var $cell = $( this ),
            idx = $cell.index(),
            dateProp = {
                day : $cell.children('span.date').text(),
                weekdayname : $cell.children('span.weekday').text(),
                month: $cell.closest('table').find('th.cw-month > span.month').text(),
                monthname: $cell.closest('table').find('th.cw-month > span.monthname').text(),
                year : self.year                    
            };

        if( dateProp.day ) {
            self.options.onDayClick( $cell, dateProp );
        }

    } );
},

}

::::更新2 ::::

将此行添加到插件事件不再有问题。

this.$el.off('click.calendarWall').on( 'click.click.calendarWall', 'td', function() {

Answer 1

这是因为您点击calendar_wall的次数与单击open-calendar元素的次数相同，每次都会注册一个新的点击处理程序。

检查当前calendar_wall实例是否已调用#calendar的可能解决方案，如果不执行任何操作。

function calendar_wall() {
    var $calendar = $('#calendar');
    if ($calendar.data('calendar_wall')) {
        return;
    }

    $calendar.data('calendar_wall', true)
    var cal = $calendar.calendarWall({
        onDayClick: function ($el, dateProperties) {
            console.log("A");
        }
    });
    //Nav
    $('#custom-next').on('click', function () {
        console.log("B");
    });
    $('#custom-prev').on('click', function () {
        console.log("C");
    });

    return cal;
}

Jquery Dialog事件重复触发

1 个答案: