Использование условного выражения .confirm () для вызова jquery .fadeOut () с длительностью портит время возврата

Question

Я хочу попросить пользователя подтвердить удаление строки таблицы. Если они говорят «да», то я хочу использовать метод jquery fadeOut () для строки таблицы с заданной продолжительностью и обратным вызовом для удаления строки таблицы после завершения затухания.

Это прекрасно работает без подтверждения, но подтверждение добавляет странное и противоречивое поведение. Если я сразу нажму "ОК", то это сработает, как и ожидалось. Но если я подожду несколько секунд, прежде чем нажать «ОК», иногда пропадание пропускается, а затем удаление строки занимает несколько секунд. Это несовместимо, и иногда мне нужно сначала сделать что-то другое (например, добавить строку), а затем я получаю ошибочное поведение (см. Демонстрационную ссылку ниже). Кроме того, если я загружаю страницу как iframe в Facebook, например, я получаю проблему каждый раз.

Я думал, что это как-то связано с асинхронным или прогрессивным кодированием, и пытался изменить свой код так, чтобы он вызывал fadeOut в качестве обратного вызова из настроенной функции подтверждения, но это ничего не решало. Вероятно, я не сделал это должным образом. Если не будет запрошено, я не буду публиковать этот код, чтобы избежать путаницы. Я также подумал, что это может быть связано с очередью событий jquery или контекстом выполнения, но я не знаю достаточно, чтобы понять / отладить это.

Итак, вот фрагмент моего кода, где проблема. Обратите внимание, что он работает нормально, если я вынимаю подтверждение или вынимаю fadeOut и просто использую команду remove:

// handler to remove question (uses "on" to bind event to future added rows)
        $("#questions").on("click",".removeQuestion", function(){
            if (confirm('Are you sure you want to remove this question?')) {
                // be sure to leave one question to fill in
                if ($("table#questions tr").length == 1) {
                    $(this).parents("td").find("textarea").val('');
                    $(this).parents("td").find("input[type=radio]").attr('checked', false);
                }
                else {
                    $(this).parents("tr").fadeOut(300, function() {
                        $(this).remove();
                    });
                    // update total questions text
                    $(".total_questions").text(function(index, text) {
                      return parseInt(text)-1;
                    });
                }
            }
        });

Вот ссылка на демонстрационную страницу, где вы можете попытаться продублировать ошибку (вам, возможно, придется поиграть с ней - см. Заметки выше о несоответствиях - первые несколько попыток часто работают отлично) и просмотреть весь источник: https://xcitemediacustomfacebookpages.com/hebetsmccallin/admin_test.php

Кстати, я тестирую его на Chrome на Mac.

Спасибо за вашу помощь! Я ходил кругами на этот, и это так расстраивает.

Answer 1

У меня возникла та же проблема при использовании подтверждения () с функцией .animate () -.Кажется, что .fadeOut () или, в моем случае, .animate () начинает считать, как только вызывается подтвердите ().Решением, которое я нашел, было добавление пользовательской функции в очередь:

$('#myId').queue(function(){
    $(this).delay(0).dequeue();
}).animate({
    top: 0  // Example
}, 'slow');

В вашем случае это будет:

$(this).parents("tr").queue(function(){
    $(this).delay(0).dequeue();
}).fadeOut(300, function() {
    $(this).remove();
});

Дополнительная функция в основном ждет 0 миллисекунд и затем продолжает сочередь, которая, кажется, предотвращает немедленный вызов анимации.Это не работает без .delay (), хотя ...

Надеюсь, это поможет!

Answer 2

У меня нет Mac, поэтому я не могу понять, является ли это проблемой "Mac".Я посмотрел на ваш код и несколько переписал его, чтобы заставить его повторно использовать некоторые вещи:

$('#questions .removeQuestion').on('click', function() {

        var element = $(this).closest('tr');

        if (confirm('Are you sure you want to remove this question?')) {

            var nrOfQuestions = $('#questions tr').length;    

            if (nrOfQuestions == 1) {
                element.find('textarea').val('');
                element.find('input[type=radio]').removeAttr('checked');
            }
            else {
                element.fadeOut(300, function() {
                        element.remove();
                });

                // update total questions text
                $('.total_questions').text(nrOfQuestions - 1);
            }
    }
});

Примечания:

1. Я сохраняю строку, по которой щелкнули, для последующей обработки - яВы использовали closest для получения ближайшего «родителя».
2. Find Можно выполнить операции, чтобы найти дочерние элементы во всем поддереве
3. Каждый раз пересчитывать количество вопросов (повторно использовать предыдущий результат)
4. Клик будет срабатывать по ссылке удаления, а не по таблице #questions.

Answer 3

По-прежнему ли возникает проблема, если вы удалите ссылку на jquery.tablednd_0_5.js?

А что если вы измените функцию привязки события на:

$(".removeQuestion").live("click", function(){
    //rest of previous function content
});