Использование .confirm() условно для вызова jquery .fadeOut() с длительностью messes up time of callback

Question

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

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

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

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

// 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

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

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

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

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

У меня была такая же проблема, используя confirm() с помощью функции .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(), хотя ...

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