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);
}

Reply via email to