Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2016, 11:19
Интересующийся
Отправить личное сообщение для boris2000 Посмотреть профиль Найти все сообщения от boris2000
 
Регистрация: 25.11.2009
Сообщений: 22

почему не обрабатываются события в динамически добавленых строках таблицы
Добрый день!

Мне на странице надо иметь возможность динамически добавить строчки в таблицу (в примере ниже работает нормально), и дать возможность перехода между полями таблицы при помощи стрелок навигации на клавиатуре (работает не вполне правильно). Проблема в том, что навигация при помощи стрелок между полями таблицы работает только в полях таблицы, которые уже имелись на странице в 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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2016, 12:30
Интересующийся
Отправить личное сообщение для boris2000 Посмотреть профиль Найти все сообщения от boris2000
 
Регистрация: 25.11.2009
Сообщений: 22

Поискал еще, заменил строчку
$('#prevtable input').keydown(function(e) {
на
$("body").on('keydown', '#prevtable input', function(e) {


После этого стало работать лучше, но все равно не совсем так как надо.
А именно: при нажатии на стрелки в первых трех строчках таблицы (которые уже были в html) - все переходы вперед/назад/вверх/вниз работают.
Но в добавленных через JS строках работает переход при нажатии стрелок только в первом и втором столбцах таблицы, а в третьем (последнем) столбце переход не работает вниз/вверх. Можно при нажатии на стрелку на клаве только вернуться назад - т.е. на второй столбец той же строчки.
А как сделать чтобы и в последнем столбце добавленных через JS строк была нормальная навигация?
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2016, 13:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от boris2000
$("body").on('keydown', '#prevtable input', function(e)
заменить на

$("#prevtable").on('keydown', 'input', function(e)
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не работает атрибут download у динамически созданного <a>? iNfantry Элементы интерфейса 15 18.10.2016 21:13
Динамически создаваемые ячейки таблицы. Le7o Элементы интерфейса 1 11.02.2016 19:28
Почему не работает .bind для события onsubmit формы? Chuck90 Events/DOM/Window 2 26.10.2013 17:48
Не работают события в подгруженых динамически элементах vipka jQuery 11 31.01.2010 01:44
Почему в Опере не действует заданный цвет границ таблицы? alex-v (X)HTML/CSS 3 20.08.2009 14:29