Question

我正在使用以下ajax / jquery代码，如果用户提交了错误的登录详细信息，我的div登录表单会被翻转并告诉用户他们输入了错误的登录详细信息，反之亦然，如果用户提交了正确的登录详细信息它翻转div并说登录详细信息是正确的。

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

这有什么理由吗？请有人能告诉我我做错了什么吗？感谢

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

Answer 1

它看起来像翻转！插件不会在翻转发生时或调用revertFlip()方法时保留事件处理程序。因此，在您显示消息然后还原为显示登录表单后，您的$('#submit').click()处理程序就会消失。

您可以使用事件委派将更高级别的处理程序附加到DOM中，以便它能够在Flip的本地重排中幸存下来！正在做显示/隐藏的事情。改变这一行：

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

对此：

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

执行此操作后，您实际上不需要将整个内容包装在$(document).ready()中。使用它不会阻止任何工作，但可能会略微减慢该处理程序处于活动状态所需的时间：http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

循环jquery / ajax函数？

1 个答案: