После удаления из таблицы с помощью jquery неправильные функции вызываются при событиях нажатия для кнопок в других строках

#jquery #html-table #row

#jquery #html-таблица #строка

Вопрос:

Настройка следующая: каждая строка в таблице описывает элемент из базы данных в соответствии с определенной формой. Каждый <td> элемент представляет значение элемента формы. Первым <td> элементом в каждой строке является кнопка, которая при нажатии должна отправлять на сервер item_id удерживаемый в ее строке (кнопки) код, и после успешного возврата сервером строка, содержащая отправленный идентификатор, должна быть удалена.

Что на самом деле происходит, так это то, что после того, как я удаляю некоторую строку, позже в функции onclick в других строках идентификатор является идентификатором удаленной строки. Например, если у меня есть:

 <tr id=1></tr>
<tr id=2></tr>

Код Jquery, используемый для удаления строк:
(ItemId изменен в цикле …)

 var num = eval($("#oldnum").val())   2;
for (var i=2; i < num; i   ){
//      var remElem = $('#items tbody tr:nth-child(' i ') img[name="remitem"]');
        var remElem = $('#remitem' (i-2));
        var row = $('#items tbody tr:nth-child(' i ')');
        var itemId = $(row).attr('id').split("_");
        //id of a row is item_actualId, we want the actualId
        itemId = itemId[1];
        $(remElem).click(function(){
            removeExistingItem(itemId);
        });
}
...
function removeExistingItem(itemId){
    var answer = confirm("האם ברצונך למחוק את  הפריט?");
    if (!answer){
        return;
    }
    var path = window.location.pathname;
    $.ajax({
        url: "/po/removeitem", dataType: "json",
        data: {id: itemId, format: "json"}, success: function(){
            $('#items tr[id="item_' itemId '"]').remove();
        }
    });
}

Приветствуется любая помощь…

1. Можете ли вы показать настраиваемый обработчик? Первая мысль заключается в том, что вы используете индекс строки таблицы, а не реальный идентификатор, поэтому имеет смысл, что после удаления одного индекс все еще там (тот, что под ним, просто был перемещен вверх.)

2. Пожалуйста, покажите, как вы присваиваете значение itemId в click обработчике

3. Кроме того, опубликованный вами HTML-код показывает числовые идентификаторы (которые недопустимы в HTML4), но ваш код предлагает идентификаторы, которые выглядят как item_1 .

4. Я добавил код, присваивающий значение ItemId.

5. @patrick dw именно так выглядит — item_1, item_12 Проблема заключалась в том, что во всех элементах removeExistingItem вызывался с одинаковым значением — я полагаю, что значение ItemId в анонимной функции не вычислялось до вызова этих функций, скорее, сохранялась какая-то форма ссылки на переменную ItemId. Если это так, то это имеет смысл, поскольку тогда все функции вычисляют ItemId до присвоенного ему значения. Кто-нибудь может подтвердить мой вывод?

Ответ №1:

Я думаю, вы можете упростить это, просто сохранив свою ссылку:

 $(remElement).click(function()
{
    var currentObj = this;

    $.ajax({
       url: 'myUrl',
       data: { myData: 'Value1' },
       success: function()
       {
           $(currentObj).parent().parent().remove();
       }
    });
});

Просто сохраните ссылку на ваш текущий объект, а затем поднимитесь по дереву, чтобы найти его родительскую строку и удалить ее.

Ответ №2:

Почему бы вам не попробовать сделать: (используя селектор идентификаторов)

 $('#item_' itemId).remove();