使用.confirm（）条件来调用jquery .fadeOut（），并用持续时间来调整回调时间

Question

我想要求用户确认删除表格行。如果他们说是的，那么我想在具有设定持续时间的表行上使用jquery fadeOut（）方法，并在淡出完成后使用回调来删除表格行。

这工作正常没有确认，但确认增加奇怪和不一致的行为。如果我立刻点击“确定”，那么它按预期工作。但是如果我在等待几秒钟后点击“确定”，则淡出有时会被跳过，然后在删除该行之前需要几秒钟。这是不一致的，有时我需要先做其他事情（比如添加一行），然后得到错误行为（请参阅下面的演示链接）。另外，如果我在Facebook中将页面加载为iframe，每次都会遇到问题。

我认为这与异步与渐进式编码有关，并尝试改变我的代码以调用fadeOut作为自定义确认函数的回调函数，但这并没有解决任何问题。很可能我没有做好。除非有要求，否则我不会发布该代码以避免混淆。我也认为它可能与jQuery事件队列或执行上下文有关，但我不知道足够了解/调试它。

所以这里是我的代码片段，其中的问题是。需要注意的是，如果我拿出的确认工作正常，或者如果我拿出了淡出，只是使用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

如果您删除对jquery.tablednd_0_5.js的引用，您仍然会遇到问题吗？

约如果你改变了事件绑定功能是什么：

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

Answer 2

我没有得到一台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. 的点击将触发删除链接上，而不是在#questions表
4. 重新计算数量。

Answer 3

我有使用confirm（）与.animate（）函数相同的问题。看起来.fadeOut（）或在我的情况下.animate（）只要confirm（）被调用就开始计数。我找到了解决办法是添加自定义功能的队列：

$('#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（）虽然...

希望这会有所帮助！