Проблема со списком jquery
Помогите пожалуйста. Суть проблемы в следующем.
Есть список, выполненный в виде строк таблицы <tr>. Внутри находится несколько колонок. В одной из колонок ссылка для удаления родительского <tr> (.delete). В другой выводится номер строки, совпадающий с id родительского <tr> (.number). На странице также есть ссылка для добавления строк, т.е. элементов списка (.add). Так вот, допустим мы добавляем n элементов списка. У каждого элемента <tr> свой id, по возрастанию. При удалении одного из элементов, должен производиться пересчет, т.е. если у нас есть 3 элемента и мы удаляем второй, то 2 удаляется, а 3 меняет свой id на 2. Я реализовал это след. образом. При нажатии на удалить, id засовываю в переменную. После етого произвожу удаление всего, что было после <tr> то есть все next tr'ы, и воссоздаю их снова с помощью цикла. Работает, но некорректно. В FF и Oper'e все работает нормально, но если попытаться удалить элемент с id=2, два раза, т.е. до удаления и после, то ничего не происходит. Если после этого добавить элемент, то все нормально, но опять же нельзя удалить два раза. В IE при нажатии на удалить, удаляет, если элемент только один. Если несколько, то удаляет только при нажатии на "удалить" последнего элемента, а потом первого. Код прилагается ниже. Помогите разобраться с данным методом или если есть метод проще, подскажите пожалуйста:) Заранее спасибо. $(document).ready(function(){ $(".add").click(function() { a=a+1; arr[a]=a; p=a; var oldHtml = $('#approachs-list tr:last').html(); if (a%2 == 0) { var newHtml = '<tr id=' + arr[a] + ' class="blue">' + oldHtml +'</tr>'; } if (a%2 != 0) { var newHtml = '<tr id=' + arr[a] + ' class="pink">' + oldHtml +'</tr>'; } $('#approachs-list').append(newHtml); $('#approachs-list tr:last .number').text(arr[a]); $('.delete').click(function() { tr = $(this).parents('tr'); thisid = $(tr).attr('id'); $(tr).nextAll() .remove(); tr.remove(); j = arr[thisid]; for (i=j;i<p;i++) { var oldHtml2 = $('#approachs-list tr:first').html(); if (i%2 == 0) { var newHtml2 = '<tr id=' + i + ' class="blue">' + oldHtml2 +'</tr>'; } if (i%2 != 0) { var newHtml2 = '<tr id=' + i + ' class="pink">' + oldHtml2 +'</tr>'; } $('#approachs-list').append(newHtml2); $('#approachs-list tr:last .number').text(i); } p=p-1; a=a-1; }); }); }); |
Это бредовая идея с пересчетом идентификаторов, пересмотрите алгоритм решения задачи.
Помоему у каждой строки в таблице есть свойство rowIndex, которое пересчитывается браузером автоматически при добавлении/удалении строк. |
Код поправил, проблемы частично устранил:) Вот только click в IE на динамически созданных элементах не работает (точнее работает, но только на одном элементе). В других браузерах все ок. Использую библиотеку livequery для обработки динамически созданных элементов.
В чем может быть проблема? |
В jQuery 1.3 (обещают финальную версию через несколько дней) будет встроен метод live, который делает тоже самое, что плагин livequery.
В вашем случае вообще лучше повесить один обработчик события на таблицу и использовать эффект всплывания события: $('table').bind('click', function(e) { if(e.target.tagName == 'TR') { // e.target.rowIndex — номер строки } }); Тогда не нужно будет отслеживать изменения DOM и назначать нужные обработчики событий. |
Часовой пояс GMT +3, время: 15:11. |