Проблема с удалением строк таблицы, добавленных с помощью jQuery

Question

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

Прежде всего, у меня есть таблица с 5 строками по умолчанию. Их можно сортировать, используя плагин «Table Drag'n'Drop». Столбец в этой таблице состоит из связанного X, который удаляет строку таблицы при нажатии.

Таблица выглядит так:

<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.track повторяется пять раз в коде. Они отлично перетаскиваются и снимаются нажатием на X.

Это код jQuery:

// 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;
    });
});

Когда я добавляю новую строку таблицы, эта строка не позволяет сортировать или удалять ее, нажав X. Похоже, jQuery не замечает, что она там есть?

Answer 1

Вам нужно использовать live:

Привязывает обработчик к событию (например, нажатию) для всех текущих и будущих элементов.

Звучит как победитель. Так что просто замените эту строку:

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

При этом вместо live введите

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

Edit:

Что касается сортировки, то, видимо, используемый вами плагин не принимает внутреннее значение live. Единственное решение - снова вызвать код инициализации после добавления новой строки таблицы. Вы можете сделать это хорошо с некоторыми плагинами, а некоторые другие не справляются с этим красиво. Дайте нам знать, как оно идет. Просто добавьте это:

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

Внутри обработчика кликов #addMore после добавления newTrack.

Answer 2

Плагин tableDnD имеет метод, который, вероятно, был добавлен с тех пор, как этот вопрос был первоначально опубликован, но для полноты изложения я добавлю его здесь:

.tableDnDUpdate()

Как указано в документации tableDnD,

заставляет таблицу обновлять свои строки, чтобы работала функция перетаскивания, если, например, вы добавили строку.

Answer 3

Вы должны обновить Sortable в JQuery.

$ ( "#") треки сортировка ( "обновить").

Предполагается, что вы используете нестандартный плагин Sortable. .tableDnD выглядит как пользовательский метод расширения.

Answer 4

Вам необходимо использовать live для привязки текущих и будущих элементов к событиям.