Javascript Jquery对话框事件重复触发
我正在jquery对话框中打开一个日历插件 我一直面临的问题是,每当我关闭对话框并重新打开时,我的日历事件Javascript Jquery对话框事件重复触发,javascript,jquery,html,dialog,repeat,Javascript,Jquery,Html,Dialog,Repeat,我正在jquery对话框中打开一个日历插件 我一直面临的问题是,每当我关闭对话框并重新打开时,我的日历事件onDayClick将触发两次。如果重复,将触发3次,依此类推 <div id="show_calendar"> <div class="custom-calendar-wrap"> <div class="custom-header clearfix"> <nav> <span id="cust
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>
::更新2:::
将这一行添加到插件事件不再有问题
this.$el.off('click.calendarWall').on( 'click.click.calendarWall', 'td', function() {
这是因为您调用
calendar\u wall
的次数与单击open 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;
}
显示
calander\u wall()
的代码。听起来像是对calander进行了重新斜体化。当您更改calander的html时,您不能在ajax回调中初始化calander吗?您能给我一些示例吗?发布加载到calanderissue的ajax示例,通过在事件中添加off和on来修复。我实际上想重新初始化日历
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;
}