循环jquery/ajax函数？

我有我使用的以下ajax/jquery代码，如果用户提交了错误的登录详细信息，我的div围绕登录表单被翻转，并告知用户他们输入了错误的登录详细信息，反之亦然，如果用户提交正确的登录细节它翻转div并且说登录细节是正确的。循环jquery/ajax函数？

但是，如果我的用户输入了错误的用户名或密码，并且div被翻转，那么它会告诉他们他们输入了错误的登录详细信息，然后再次尝试并输入正确的详细信息，div不会翻转，用户必须刷新jquery的工作页面。

这是有原因吗？请有人告诉我我做错了什么？感谢

我使用下面的翻转插件： http://lab.smashup.it/flip

<script src="assets/jquery/jquery.min.js"></script> 
<script type="text/javascript" src="assets/jquery/flip/jquery.flip.js"></script> 
<script type="text/javascript" src="assets/jquery/flip/jquery.flip.min.js"></script> 
<script src="assets/jquery/jquery-ui.js"></script> 



<script type="text/javascript"> 
$(document).ready(function() { 
    $("#submit").click(function() { 
     var myusername = $("#myusername").val(); 
     var mypassword = $("#mypassword").val(); 
     if (myusername == null || myusername == "" || mypassword == null || mypassword == "") { 
      if (myusername == null || myusername == "") { 
       document.forms["form"]["myusername"].style.border = "2px solid #963634"; 
      } 
      if (mypassword == null || mypassword == "") { 
       document.forms["form"]["mypassword"].style.border = "2px solid #963634"; 
      } 
      $(".home_column").effect("shake"); 
     } else { 
      // Returns successful data submission message when the entered information is stored in database. 
      $.post("include/validate_login.php", { 
       username1: myusername, 
       password1: mypassword 
      }, function (data) { 
       if (data == 'login_wrong') { 
        $(".home_column").flip({ 
         direction: 'lr', 
         color: 'rgba(138, 138, 138, 0.2)', 
         content: '<h2s1>Incorrect Login Details</h21>' 
        }) 
        setTimeout(function() { 
         $(".home_column").revertFlip() 
        }, 2500); 
       } else { 
        if (data == 'login_success') { 
         $(".home_column").flip({ 
          direction: 'lr', 
          color: 'rgba(138, 138, 138, 0.2)', 
          content: '<h2s1>correct Login Details</h21>' 
         }) 
         setTimeout(function() { 
          $(".home_column").revertFlip() 
         }, 2500); 
        } 
       } 
       $('#form')[0].reset(); // To reset form fields 
      }); 
     } 
    }); 
}); 

</script>

来源

2015-03-03 Kevin Parks

您使用哪种jQuery插件进行翻转效果？ – alkis 2015-03-03 12:53:49

@alkis请参阅jquery插件详细信息的更新问题 – 2015-03-03 12:54:51

您已使用我们无法访问的本地资源更新。与半相关：您包含同一个插件的完整版本和缩小版本！ – Jamiec 2015-03-03 12:55:11

它看起来像翻转！插件不会在某个时候保存事件处理程序，或者发生翻盖或者调用revertFlip()方法。所以，当你显示一条消息，然后恢复显示登录表单后，你的处理程序就不存在了。

您可以使用事件委托来将更高级别的处理程序附加到DOM中，以便它能够在Flip！正在做显示/隐藏的东西。改变这一行：

$('#submit').click(function() {

要这样：

$(document).on('click', '#submit', function() {

之后你这样做，你并不真的需要来包装整个事情$(document).ready()无论是。使用它不会阻止任何工作，但可能会稍微减慢该处理程序需要多长时间才能生效：http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

来源

2015-03-03 13:35:19

非常感谢 – 2015-03-03 15:07:23

循环jquery/ajax函数？

回答

相关问题