Вызов функции и jQuery

[skeef]

Всем привет!

При старте вызывается функция countTab(), которая динамически формирует строки HTML таблицы. Таблица формируется - все хорошо. Как только я вызываю эту же функцию по событию:

$( "#x-summ" ).keyup( function() {	
countTab(); 
} );

то происходит какая-то ошибка.
Функция продолжает нормально отрабатывать при каждом вызове, однако перестает работать подсветка строк:

$( "#x-table tr" ).hover(
				function()
				{
					$( this ).children( "td.bg-odd-simple" ).css( "backgroundColor", cS.c15 );
					$( this ).children( "td.bg-even-simple" ).css( "backgroundColor", cS.c19 );
< skip>
				},
				function()
				{
					$( this ).children( "td.bg-odd-simple" ).css( "backgroundColor", cS.c13 );
					$( this ).children( "td.bg-even-simple" ).css( "backgroundColor", cS.c14 );
< skip>
				});

и вызов плавающей таблицы по клику

$( "#x-table #td1" ).click(
				function( e )
				{
					var jpos = $( this ).offset();
					var jt_x = jpos.left + $( this ).outerWidth();
					var jt_y = jpos.top + $( this ).outerHeight();

					$( this ).css( 'borderColor', '#FF0000' );
					$( this ).css( 'border-width', '2px' );
					$.jtab( "<table border='0' cellpadding='0' cellspacing='0' id='m-table' " +
						         "width='" + (iS.i05 * .50).toFixed( 0 ) + "px' style='font-family: Arial; " +
						         "font-size: " + iS.i01 + "px;'>" +
						         "<tr>\n<th>" + ArLg[iS.i32][52] + "</th>\n" +
< skip>
						         "</table>",
					        0,
					        jt_x,
					        jt_y,
					        '#td1' );
				} );

которые до первого же вызова countTab() работают исправно. Причем, до вызова именно по событию, потому как countTab() отрабатвает первый раз при старте и не вызывает никаких конфликтов.
Консоль Firebug молчит как партизан

jQuery.noConflict не получается использовать, потому как стираются JS переменные, формируемые PHP (здесь этот код не показан)

Вот сокращенный JS-код:

$( document ).ready(
	 function()
	 {
     /*** start setup *********************************/
		 $( "#x-data" ).datepicker();
		 $( "#x-data" ).val( moment().format( "DD.MM.YYYY" ) );
		 $( "#x-summ" ).val( 1000 );

		 countTab();  
		 /*** end setup *********************************/
		
		 $( "#x-summ" ).keyup(   // <--------- вот этот вызов конфликтует
				function()
				{
					countTab();   
				} );
		 $( "#x-table tr" ).hover(  // <---------------- подсветка строк
				function()
				{
					$( this ).children( "td.bg-odd-simple" ).css( "backgroundColor", cS.c15 );
					$( this ).children( "td.bg-even-simple" ).css( "backgroundColor", cS.c19 );
< skip>
				},
				function()
				{
					$( this ).children( "td.bg-odd-simple" ).css( "backgroundColor", cS.c13 );
					$( this ).children( "td.bg-even-simple" ).css( "backgroundColor", cS.c14 );
< skip>
				});

		 $( "#x-table #td1" ).click(  // <---------------- плавающая таблица
				function( e )
				{
					var jpos = $( this ).offset();
					var jt_x = jpos.left + $( this ).outerWidth();
					var jt_y = jpos.top + $( this ).outerHeight();

					$( this ).css( 'borderColor', '#FF0000' );
					$( this ).css( 'border-width', '2px' );
					$.jtab( "<table border='0' cellpadding='0' cellspacing='0' id='m-table' " +
						         "width='" + (iS.i05 * .50).toFixed( 0 ) + "px' style='font-family: Arial; " +
						         "font-size: " + iS.i01 + "px;'>" +
						         "<tr>\n<th>" + ArLg[iS.i32][52] + "</th>\n" +
< skip>
						         "</table>",
					        0,
					        jt_x,
					        jt_y,
					        '#td1' );
				} );
		 /*** functions *********************************/
		 function countTab()  // <---------------- собственно функция
		 {
			 var tmpDat;
			 var tmp;
< skip>
			$( "#x-table>tbody" ).html( '' );

			 for( var i = 1; i < countM; i++ )
			 {
< skip>
			 tmp = "<tr>\n" +
			 "<td  id='td" + i + "' " + tdClassE + ">" + arTab[i].dat +
			 "</td>\n" +
< skip>
			 tmp += "</tr>\n";

		 	} // end For
		        $( "#x-table>tbody" ).append( tmp ); 

	          } // end countTab  
	 });

В чем может быть ошибка? Обнулял руками переменные перед выходом из функции countTab(); - тож не помагает.
Подскажите, плз, где собаки зарыты?

[Amphiluke]

Ф-ция countTab() очищает все строки в таблицы (а вместе с ними и обработчики событий, уже зарегистрированных непосредственно на самих <TR>). Вам стоит переделать обработчик событий мыши на делегирующий вариант. То есть обработка события должна производиться не на самих <TR> (коль скоро они постоянно удаляются/добавляются), а на родительском элементе — к примеру, на <TABLE>.

[skeef]

Вот оно что! Спасибо. Только не совсем понял как сделать обработку на родительском элементе? Указывать всю иерархию, начиная с table?
$(table#x-table > tbody > td#td1). - так?

[Amphiluke]

Да не. Что-то наподобие (не проверяю)

$("#x-table").on("mouseenter mouseleave", "tr", function (e) {
	if (e.type == "mouseenter") {
		$(this).css("background", "#0a0");
	} else {
		$(this).css("background", "");
	}
});

Почитайте про делегацию в jQuery API (.on(), .delegate()).

[skeef]

Огромное спасибо! Обязательно прочту!