Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скрипт не работает на добавленные строки (https://javascript.ru/forum/jquery/53829-skript-ne-rabotaet-na-dobavlennye-stroki.html)

Гробовщик 20.02.2015 12:10

Скрипт не работает на добавленные строки
 
Доброго времени суток, дамы и господа.
КОРОТКАЯ ВЕРСИЯ ВОПРОСА
Есть таблица из 3-х столбцов, в каждой ячейке находиться текстовое поле. Нажатием на ссылку (кнопку) надо добавлять в предпоследнюю строку таблицы аналогичную строку текстовыми полями (это работает). Когда мы пишем значение в текстовое поле во втором столбце, оно должно дублироваться в текстовое поле первого столбца в строку ниже.
ДЛИННАЯ ВЕРСИЯ ВОПРОСА
Есть у меня скрипт, который будет высчитывать маршрут от точки до точки. Исходная точка и конечная всегда одинаковые, а вот количество остановок может быть разным.
Вот HTML код.
Введите маршрут:
<table width="100%" id="myTable">
<tr>
<td>
Точка выезда
</td>
<td>
Точка прибытия
</td>
<td>
Длинна маршрута<br />(Расчитывается автоматически)
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="225" size="40" value="Проспект какушкина, 177б к1" disabled />
</td>
<td>
<input type="text" maxlength="225" size="40" value="" class="adr_p" />
</td>
<td>
<input type="text" maxlength="225" size="20" value="" disabled/>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="225" size="40" value="" disabled/>
</td>
<td>
<input type="text" maxlength="225" size="40" value="Проспект какушкина, 177б к1" disabled />
</td>
<td>
<input type="text" maxlength="225" size="20" value="" disabled/>
</td>
</tr>
</table>
<input type="submit" value="Далее->" name="button">

Как видно из HTML кода есть таблица, в которой на данный момент 3 строки: одна в качестве заголовка, и две строки для расчёта расстояния, т.е. из пункта А в пункт В и обратно.
Но иногда из пункта А сначала нужно доехать до пункта И, а потом до пункта С
Соответственно уже будут 3 строки: A->B, B->C и С->A.
Строки добавляются по ссылке
<a href="javascript://" onclick="addRow('myTable');">Добавить строку</a>
function addRow() {
var adrr= $('#myTable tr').eq(-2).find('td:eq(1) input[type="text"]').val();    
var html='<tr><td><input type="text" maxlength="225" size="40" value="'+adrr+'" disabled /></td><td><input type="text" class="adr_p" maxlength="225" size="40" value="" /></td><td><input type="text" maxlength="225" size="20" value="" disabled/></td></tr>';    
$('#myTable tr').eq(-2).after(html);	
};

Скрипт добавляет строку в таблицу на предпоследнее место и автоматом прописывает значение "точки прибытия" в "точку отправления" строкой ниже.
Для более полной удобности я решил ещё повесить событие focusout, т.е. когда мы снимаем фокус с текстового поля с классом "adr_p" то его значение записывается в строку ниже в "точку отправления". С текстовым полем, которое выведено изначально скрипт работает, а вот с полями добавленными позже (нажатием на ссыль) скрипт работать отказываться...
$('.adr_p').focusout(function(){
var adr_d=$(this).val();
var row_d=$(this).parent('td').parent('tr').index();
row_d=row_d+1;
$('#myTable tr').eq(row_d).find('td:eq(0) input[type="text"]').val(adr_d); 
});

рони 20.02.2015 12:37

Гробовщик,
$('#myTable').on('focusout', '.adr_p', function(){ далее по тексту

Гробовщик 20.02.2015 13:18

рони,
Спасибо, я как то даже и не подумал о, ".on"


Часовой пояс GMT +3, время: 04:17.