jquery iterating through newly created elements

Question

Hi All,

I am trying to add new rows in my table, and save them into DB.

First, I use .append() to append rows on the table:

$("#tablename").append("<tr id='newRow'><td>newly added row</td></tr>");

The appending function works fine. My page displays the correct result.

However, I am unable to select them with

$("#newRow").each(function () { alert "it never reaches here!"; });

I am guessing it is because the elements are added after the DOM is loaded. Can anyone please tell me how I can iterate through all my newly added elements?

Thank you.

Answer 1

You should use a class for this case, an ID has to be unqiue (it's invalid HTML and will give some weird behavior otherwise), like this:

$("#tablename").append("<tr class='newRow'><td>newly added row</td></tr>");

$(".newRow").each(function () { alert "it never reaches here!"; });

Answer 2

If all you need is to loop the new rows you can do this:

var rows = $("<tr class='newRow'><td>newly added row</td></tr>").appendTo('#tablename');
rows.each(function () { alert "it never reaches here!"; });

Answer 3

Nick's method works just fine, here's another:

$(function(){
  //add a class to mark the last row on load
  $('#tableName tr:last').addClass('lastRow');

  // ...

  // select new rows when you click save
  $('input:submit').click(function(){
     $('#tableName tr.lastRow').nextAll().each(function(){
        alert('added row');
     });
  });
});