title: Getting data from dynamically added table rows
body: <p>I have a Django invoice project, which has a back-end with products, manufacturer, etc.</p>
  
  <p>Now there is a bill table with the columns headings: Product ID, Product Name, Product Price, Product Quantity, Taxes, Total, etc</p>
  
  <p>With an add row button users can add rows for next product (ie, dynamically added rows).</p>
  
  <p>What I now want is to bind jQuery event-listener with each Product ID columns(i.e. if I have 5 rows for 5 products, each row should have a Product ID column), such that as the user inputs (and edits) the product ID, I can - with the help of AJAX-fill the remaining columns. </p>
  
  <p>My doubt is how to do that.</p>
  
  <p>Also, as I get the AJAX data back, how do I identify the row to add the data (Product Name, Product Price, etc) to?</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>I am generating the dynamic rows with the following code:</p>
  
  <pre><code>function generateTableRow() {
  var emptyColumn = document.createElement('tr');
  
  emptyColumn.innerHTML = '&lt;td&gt;&lt;a class="cut"&gt;-&lt;/a&gt;&lt;span class="itemcode" contenteditable&gt;&lt;/span&gt;&lt;/td&gt;' +
      '&lt;td colspan="2"&gt;&lt;span contenteditable&gt;&lt;/span&gt;&lt;/td&gt;' +
      '&lt;td&gt;&lt;span contenteditable&gt;100.00&lt;/span&gt;&lt;/td&gt;' +
      '&lt;td&gt;&lt;span contenteditable&gt;&lt;/span&gt;&lt;/td&gt;' +
      '&lt;td&gt;&lt;span contenteditable&gt;&lt;/span&gt;&lt;/td&gt;'+
      '&lt;td&gt;&lt;span contenteditable&gt;&lt;/span&gt;&lt;/td&gt;' +
      '&lt;td&gt;&lt;span contenteditable&gt;&lt;/span&gt;&lt;/td&gt;'+
      '&lt;td&gt;&lt;span contenteditable&gt;&lt;/span&gt;&lt;/td&gt;' +
      '&lt;td&gt;&lt;span contenteditable&gt;&lt;/span&gt;&lt;/td&gt;' +
      '&lt;td&gt;&lt;span contenteditable&gt;&lt;/span&gt;&lt;/td&gt;' ;
  
  
  
  return emptyColumn;
  }
  </code></pre>
  
  <p>Note that the first span has class: "itemcode"</p>
  
  <p>This is my jquery code:</p>
  
  <pre><code>$("#inventory_table .itemcode").on("focus", function(){
  alert( "On focus for table inventory called." );
  
  alert($(this).text());
  });
  </code></pre>
  
  <p>the table id is "inventory_table".</p>
  
  <p>This jquery event-listener is not getting bound with the dynamically generated rows.</p>
  
  <p>Any help is appreciated. </p>
  
  <p>Thanks</p>