Javascript-форум - почему не обрабатываются события в динамически добавленых строках таблицы

Добрый день!

Мне на странице надо иметь возможность динамически добавить строчки в таблицу (в примере ниже работает нормально), и дать возможность перехода между полями таблицы при помощи стрелок навигации на клавиатуре (работает не вполне правильно). Проблема в том, что навигация при помощи стрелок между полями таблицы работает только в полях таблицы, которые уже имелись на странице в html (см. код таблицы ниже), а в добавленных через JS строчках таблицы навигация между полями таблицы не работает! Хотя строчки добавляются правильно, т.е. внутри самой таблицы (в рамках tbody) и с правильно сформированным идентификатором полей (т.е. prevagebeg4, prevageend4, prevnumerator4 и т.д.). И при нажатии на стрелку "вниз" на третьей строчке таблицы осуществляется переход на добавленную через JS строку - т.е. браузер понимает что добавленная строка существует, и поле в ней имеет соответствующее имя.

Подскажите пожалуйста, как исправить скрипт чтобы и в добавленных через JS строчках таблицы навигация стрелками с клавиатуры работала правильно?

На странице две JS-функции:
1. Добавление строк в таблицу

<script language="JavaScript">
<!-- ;
 
var counterprev = 3; // сколько рядов в таблице уже есть
function moreFields(){
// добавляет новую строчку в конец таблицы
	counterprev++;
	c = counterprev;
	var newFields = '<tr><td><input type="text" name="prevagebeg" size="3" value="" id="prevagebeg' + c + '"/ class=ftde_agebeg></td> \
<td><input type="text" name="prevageend" size="3" value="" id="prevageend' + c + '"/ class=ftde_ageend></td> \
<td><input type="text" name="prevnumerator" size="5" value="" id="prevnumerator' + c + '"/ class=ftde_numerator></td> \
</tr>';
	$('#prevtable > tbody:last-child').append(newFields);
}

// end hide -->
</script>

2. Навигация по полям таблицы при помощи стрелок вперед/назад/вверх/вниз с клавиатуры

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$('#prevtable input').keydown(function(e) {
    var td;
    switch (e.keyCode) {
      case 39: // right
        td = $(this).parent('td').next();
        break;
      
      case 37: // left
        td = $(this).parent('td').prev();
        break;
        
      case 40: // down
        var i = $(this).parent().index() + 1;
        td = $(this).closest('tr').next().find('td:nth-child(' + i + ')');
        break;
        
      case 38: // up
        var i = $(this).parent().index() + 1;
        td = $(this).closest('tr').prev().find('td:nth-child(' + i + ')');
        break;

      case 13: // enter
        td = $(this).parent('td').next();
        break;

	}
    td.find('input').focus();
  });
</script>

Сама таблица выглядит так:

<table border=0 cellspadding=0 cellspacing=2 id="prevtable">
<tbody>
<tr>
<td class=ftde_agebeg>Начало</td>
<td class=ftde_ageend>Конец</td>
<td class=ftde_numerator>Показатель</td>
</tr>
<tr>
<td><input type="text" name="prevagebeg1" size="3" value="20" id="prevagebeg1" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend1" size="3" value="40" id="prevageend1" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator1" size="5" value="523" id="prevnumerator1" class=ftde_numerator/></td>
</tr>
<tr>
<td><input type="text" name="prevagebeg2" size="3" value="41" id="prevagebeg2" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend2" size="3" value="60" id="prevageend2" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator2" size="5" value="723" id="prevnumerator2" class=ftde_numerator/></td>
</tr>
<tr>
<td><input type="text" name="prevagebeg3" size="3" value="61" id="prevagebeg3" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend3" size="3" value="80" id="prevageend3" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator3" size="5" value="851" id="prevnumerator3" class=ftde_numerator/></td>
</tr>
</tbody>
</table>

<a href="javascript:moreFields();">Добавить ещё один ряд</a><br>