jQuery插件事件只触发一次
问题描述:
我正在为jQuery网站制作一个非常简约的日历插件。我对它没有太多的看法,所以我正在关注插件教程。我有两个应该改变月份的<a>
链接,但不幸的是他们只做了一次,然后他们都停止工作。我怀疑我把事件放在了错误的地方。jQuery插件事件只触发一次
对不起,相当凌乱的代码,它只是一个蓝图呢。
这是javascript。
(function($){
$.fn.extend({
jSimpleCalendar : function(currentDate)
{
return this.each(
function()
{
obj = $(this);
result = renderCalendar(currentDate);
obj.html(result);
// Event handlers
$('#JQSCMonthPrev').click(function()
{
currentDate.setMonth(currentDate.getMonth() - 1);
result = renderCalendar(currentDate);
obj.html(result);
});
$('#JQSCMonthNext').click(function()
{
currentDate.setMonth(currentDate.getMonth() + 1);
result = renderCalendar(currentDate);
obj.html(result);
});
});
function renderCalendar(date)
{
// Get the calendar
calendar = createMonthArray(date);
// Build xhtml
var result = '<table class="jQSCTable">';
result += '<thead><tr><td colspan=4><a href="#" id="JQSCMonthPrev"><</a> <a href="">' + getMonthNames()[date.getMonth()] + '</a> <a href="#" id="JQSCMonthNext">></a></td>';
result += '<td colspan=3><a href="#" id="JQSCYearPrev"><</a> <a href="">' + date.getFullYear() + '</a> <a href="#" id="JQSCYearNext" >></a></td></tr></thead><tbody>';
for(i=0;i<(calendar.length);i++)
{
result += '<tr>';
for (a=1; a<=7; a++)
{
result += '<td>';
if(calendar[i][a]!='N')
{
result += '<a id="JQSCLink' + calendar[i][a] + '">' + calendar[i][a] + '</a>';
}
result += '</td>';
}
result += '</tr>';
}
result += '</tbody></table>';
return result;
};
function createMonthArray(date)
{
// Get first day of month
date.setDate(1);
// Make callendar
var calendar = new Array();
// Fill empty shit from previous month
for(i=0;i<date.getDay()-1;i++)
calendar.push('N');
// Get number of days
var numberOfDays = getNumberOfDaysMonth(date);
//Fill the rest
for(i=1;i<numberOfDays+1;i++)
calendar.push(i);
// Get number of end days
var endDays = calendar.length % 7 - 1;
//Fill the empty stuff at the end
for(i=0;i<7-endDays;i++)
calendar.push('N');
//Slice to seven pieces
var slicedCalendar = new Array();
var week = 0;
slicedCalendar[0] = new Array();
for(i=1;i<calendar.length;i++)
{
slicedCalendar[week][i-week*7] = calendar[i-1];
if (((i%7)==0)&&(i!=0))
{
week++;
slicedCalendar[week] = new Array();
}
}
return slicedCalendar.splice(0, week);
};
function getNumberOfDaysMonth(date)
{
var minDays = 28;
var dateFound = false;
var oldMonth = date.getMonth();
var workDate = new Date(date.getYear(), date.getMonth(), 1);
while (!dateFound)
{
workDate.setDate(minDays+1);
var newMonth = workDate.getMonth();//new month date
if (newMonth != oldMonth)//if the month has changed
dateFound = true;
else
minDays++;
}
return minDays;
}
// Month names
function getMonthNames()
{
var month = Array();
month[0] = 'January';
month[1] = 'February';
month[2] = 'March';
month[3] = 'April';
month[4] = 'May';
month[5] = 'June';
month[6] = 'July';
month[7] = 'August';
month[8] = 'September';
month[9] = 'Octorber';
month[10] = 'November';
month[11] = 'December';
return month;
}
}
});
})(jQuery);
这里是html测试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jSimpleCalendar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#calendar").jSimpleCalendar(new Date());
});
</script>
</head>
<body>
<div id="calendar">
</div>
</body>
</html>
答
似乎发生了什么是当您第一次单击时正在重写HTML。发生这种情况时,点击事件不再绑定到hrefs,因为旧元素已从DOM中删除。
您可以将点击事件放入其自己的函数中,并在重建日历或使用事件委派后调用该函数。为此,在#calendar div上附加click事件并跟踪哪个元素被点击。
http://www.learningjquery.com/2008/03/working-with-events-part-1
如果是这样的话,还可以使用“实时”事件:http://docs.jquery.com/Events/live – montrealist 2009-04-22 20:07:44