Use either the live query plugin OR, reapply the events.
The issue is, the events are added once the dom is ready. after that, the
functions never get called again. So if you change out elements, your events
are gone. Live Query solves this.
Kyle
On Feb 11, 2008 11:13 AM, Nate <[EMAIL PROTECTED]> wrote:
>
> 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);
> }
>
