I created three table elements using jquery, and each td cell in the tables has hover and click events attached to it.
The basic table generation is cached in an array and the only changes that happen to the initial content occur by updating individual td contents using $(this).text(val). All of the events fire correctly the first time a table is rendered, but when the table is updated, only using .text(..), the events disappear. I've tried tracing what is happening, but eventually get lost, and was hoping someone would be able to explain why the events are disappearing. Here are the affected parts of the code for reference: var drawInitial = function(wks) { var cal = []; for(var i = 4; i <= 6; i++) { cal[i] = $('<table cellpadding="0" cellspacing="0" border="0"></table>'); for(var j = 0; j < i; j++) { drawWeek().appendTo(cal[i]); } } drawInitial = function(wks) { return cal[wks]; } return drawInitial(wks); } function drawWeek() { var wk = $("<tr></tr>"); for(var j = 0; j < 7; j++) { drawDay(j).appendTo(wk); } return wk; } function drawDay(dayOfWeek) { var css = ""; (dayOfWeek == 0 || dayOfWeek == 6) ? css = "calendarWeekend" : css = "calendarWeekday"; var day = $('<td class="calendarBox '+css+'"></td>'); day.hover( function() { if($(this).text()) {$ (this).addClass("calendarHover");} }, function() { if($(this).text()) {$ (this).removeClass("calendarHover");} } ); day.click( function() { if($(this).text()) { setSelected($(this).text()); } else { delayHide(); } }); return day; } function drawMonth() { var year = widgetDate.getFullYear(); var month = widgetDate.getMonth(); var firstDay = new Date(year, month, 1).getDay(); var daysInMonth = Date.getDaysInMonth(year, month); var weeksInMonth = Math.ceil((firstDay + daysInMonth) / 7); var cal = drawInitial(weeksInMonth); var i = 0, //week j = 1; //day of month cal.find("tr:not(.calendarWeek)").each( function() { $(this).children("td").each( function() { if(j > firstDay && j <= firstDay + daysInMonth) { $(this).text(j - firstDay); } else { $(this).text(""); } j++; }); i++; }); $("#"+widgetId).html(cal); }