Problem deleting table rows added using jQuery

Question

I am new to jQuery and am having problems with the small script I created.

First of all, I have a table with 5 rows by default. They are sorted using a plugin called "Table Drag'n'Drop". The column in this table consists of a related X, which deletes the table row when clicked.

The table looks like this:

<table id="tracks">
  <thead>
    <tr>
      <th>Title</th>
      <th>File</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="track">
      <td><input type="text" /></td>
      <td><input type="file" /></td>
      <td><a href="#" class="deleteme">X</a></td>
    </tr>
  </tbody>
</table>

tr.trackrepeated five times in code. They are perfectly dragged and deleted by pressing the X button.

This is jQuery code:

// makes the table sortable
$("#tracks").tableDnD();

// adds more rows (just a link)
$("#addRow").click(function() {
    newTrack = 'same code as tr.track'
    $("tbody").append(newTrack);
    return false;
});

// delete rows
$("a.deleteme").click(function() {
    $(this).parents("tr.track").fadeOut("fast", function() {
        $(this).remove();
        return false;
    });
});

When I add a new row to the table, that row will not let it sort or delete by clicking X. Does jQuery seem to not notice it there?

Answer 1

live:

(, ) , .

. :

$("a.deleteme").click(function() {

live:

$("a.deleteme").live('click', function() {

Edit:

, , , , live . - . , . , . :

$("#tracks").tableDnD();

#addMore newTrack.

Answer 2

live .

Answer 3

Sortable JQuery.

$( "#" ) ( "" );.

It is assumed that you are using the "Copy Plugin" .. tableDnD looks like a custom extension method.

Answer 4

There is a method in the tableDnD plugin that was probably added since this question was originally submitted, but for the same completeness I will add it here:

.tableDnDUpdate()

As indicated in the tableDnD documentation,

forces the table to update its rows, so the drag and drop function works if, for example, you add a row.