jQuery AJAX после исчезновения и удаления анимации строк таблицы

Question

Существует множество демонстраций, объясняющих, как затухать строку таблицы, и что ради IE мы должны затухать в ячейках таблицы, а затем удалить строку после завершения анимации.Например, этот вопрос: Исчезновение и удаление строки таблицы

У меня эта техника отлично работает.Теперь я хочу обновить таблицу с помощью ajax-вызова после того, как строка была удалена и удалена.Если я добавлю эту загрузку ajax в полный обратный вызов fadeOut, он будет срабатывать один раз для каждого столбца в моей таблице (поскольку я затухаю в ячейках таблицы, а не в строке).Это приводит к тому, что куча запросов ajax складывается.(Работает нормально, бюст - это расточительство и плохая практика.)

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

В .remove () обратного вызова нет, поэтому я должен использовать какой-то другой эффект, например .hide (), и поставить.Удалить () внутри своего обратного вызова вместе с AJAX?Как это будет справедливо с кросс-браузерной совместимостью?Есть ли какие-либо известные проблемы с влиянием на строку таблицы в более старых версиях IE?

---

Примечания: не то, чтобы это имело какое-либо значение, но я случайно использую сетку wijmoвиджет, который построен на основе jQuery UI.Но это просто обычная HTML-таблица в разметке.Затухание / удаление работает нормально.

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что обратный вызов для fadeOut выполняется для каждого соответствующего элемента (все td с), а не для всей коллекции. То, что вам нужно сделать, - это удалить и ajax после того, как последний элемент исчез. Ниже вы можете найти код из вопроса, на который вы ссылаетесь, обновленный для соответствия этой потребности (оповещение и удаление будет выполнено только один раз):

// don't use live, switch to delegate
$('#tbl').delegate('td', 'click', function() {  
    var tr = $(this).parents('tr:first'),
        tds = tr.find('td'),
        l = tds.length;

    tds.fadeOut('fast', function(){ 
        if (! --l) {
            tr.remove();                    
            alert('ajax');
        }
    });    

    return false;
});

И вот небольшой пример этого в действии: http://jsfiddle.net/a76A6/2/