Jquery Dialog 事件重复触发

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 风格的，所以打开日历按钮会被点击很多时间，最终由于堆叠而变慢。

:::::更新:::::

好的，我刚刚发现重新绑定下一年和上一年按钮可以解决问题。 现在剩下的是 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;
}