Получения данных из динамически добавляемых строк таблицы

Question

У меня есть проект счета Джанго, который имеет фоновый с продуктами, производителем и т.д.

В настоящее время существует законопроект таблица со столбцами заголовков: ID продукта, название продукта , Цена продукта, количество продукта, налоги, всего и т. Д.

С помощью кнопки добавления строки пользователи могут добавлять строки для следующего продукта (то есть динамически добавленные строки).

Теперь я хочу связать jQuery event-listener с каждым столбцом идентификатора продукта (т.е. если у меня есть 5 строк для 5 продуктов, каждая строка должна иметь столбец идентификатора продукта), так что, когда пользователь вводит (и редактирует) идентификатор продукта, я могу - с помощью AJAX - заполнить остальные столбцы.

Мое сомнение в том, как это сделать.

Также, как я возвращаю данные AJAX, как определить строку для добавления данных (название продукта, цена продукта и т. Д.)?

EDIT 1

Я генерации динамических строк с помощью следующего кода:

function generateTableRow() { 
var emptyColumn = document.createElement('tr'); 

emptyColumn.innerHTML = '<td><a class="cut">-</a><span class="itemcode" contenteditable></span></td>' + 
    '<td colspan="2"><span contenteditable></span></td>' + 
    '<td><span contenteditable>100.00</span></td>' + 
    '<td><span contenteditable></span></td>' + 
    '<td><span contenteditable></span></td>'+ 
    '<td><span contenteditable></span></td>' + 
    '<td><span contenteditable></span></td>'+ 
    '<td><span contenteditable></span></td>' + 
    '<td><span contenteditable></span></td>' + 
    '<td><span contenteditable></span></td>' ; 



return emptyColumn; 
} 

Обратите внимание, что первый пролет имеет класс: "Артикул"

Это мой JQuery код :

$("#inventory_table .itemcode").on("focus", function(){ 
alert("On focus for table inventory called."); 

alert($(this).text()); 
}); 

идентификатор таблицы является "Inventory_table".

Этот прослушиватель событий jquery не связан с динамически сгенерированными строками.

Любая помощь приветствуется.

Благодаря

Answer 1

Если предположить, что у вас есть таблица вроде этого:

<table id="products"> 
<tbody> 
<tr><td><input type="text" class="productid"></td><td><input type="text"></td><td><input type="text"></td></tr> 
<tr><td><input type="text" class="productid"></td><td><input type="text"></td><td><input type="text"></td></tr> 
</tbody> 
</table> 

Вы бы прикрепить слушать событие к классу:

$("#products .productid").on("change", function() { 
// do your AJAX here 
}); 

Вы можете передать $(this) функции обратного вызова на ответ AJAX для получения строки. Оттуда вы можете перейти к 2-й, 3-й колонке.

$(this).closest('tr').find('td:nth-child(2) input').val(x) // Insert value for second column 
$(this).closest('tr').find('td:nth-child(3) input').val(y) // Insert value for third column 

И любая пустая новая строка добавить будет иметь такую ​​же функциональность, если вход имеет класс .productid