Question

这可能只是一个简单的代码错误我不确定我对jquery和javascript相对较新。如果这么简单，我无法看到问题所在。

问题：在我使用$ .post命令后，.animate（宽度：'切换'）无法正常运行似乎多次行动，它会与标签一起滑入但它似乎几乎立刻就会重新开始。但是，当我使用$ .ajax加载链接时，似乎工作正常

研究：我似乎无法找到问题的相关信息。这表明它存在编码错误，但我不知道究竟是什么导致了问题

代码的：我的JQuery代码（包括$ .post方法和链接部分）

$(document).ready
(
    function()
    {
        $(document).on
        (
            "click","#login-tab",
            function()
            {
               //move the panel out
                $('#login').animate({width: 'toggle'}, 'fast');

                //get the width of the panel
                var width = $('#login').width();

                //figure out where the tab to either slide out or slide in the panel is 
                $('#login-tab').css('left',width - $('#login-tab').width() - 400);

                //draw either the less than or greater than sign depending whether the panel is out
                if(width < 400)
                {
                    $('#login-tab').html('&gt');
                }
                else
                {
                    $('#login-tab').html('&lt');
                }
            }
        );
        $(document).on
        (
            "click","button.submit",
            function()
            {
                var formData = $( this ).closest("form").serializeArray();
                var URL = "http://alanjavatuts.comxa.com/Testing/Scratch/" + $( this ).closest("form").attr("action");

                $.post
                (
                    URL,
                formData,
                function(data, textStatus, jqXHR)
                {
                        $("#login").html(data);
                //data: Data from Server
                }
                )
                .fail(function(jqXHR, textStatus, errorThrown) 
            {
                    if (jqXHR.status === 0) {
                        alert('Not connect.\n Verify Network.');
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]');
                    } else if (jqXHR.status == 500) {
                        alert('Internal Server Error [500].');
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.');
                    } else if (exception === 'timeout') {
                        alert('Time out error.');
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.');
                    } else {
                        alert('Uncaught Error.\n' + jqXHR.responseText);
                    }
            });
            }
        );
        $(document).on
        (
            "click","a.cpanel",
            function(event)
            {
                var URL = "http://alanjavatuts.comxa.com/Testing/Scratch/" + $( this ).attr("href");

                // Launch AJAX request.
                $.ajax
                (
                    {
                        // The link we are accessing
                        url: URL,

                        // The type of request.
                        type: "get",

                        // The type of data that is getting returned.
                        dataType: "html",

                        error:
                            function()
                            {
                                $("#login").html( "<p>Page Not Found!!</p>" );
                            },

                        beforeSend:
                            function()
                            {
                                //before its sent
                            },

                        complete:
                            function()
                            {
                                //when its complete
                            },

                        success:
                            function( strData )
                            {
                                // Load the content in to the page.
                                $("#login").html( strData );
                            }
                   }                            
               );

               // Prevent default click.
               event.preventDefault();
           return( false );
            }
        );
    }
);

我还将提供示例表单代码

<form id="register" action="users/register.php" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>
                Username:
            </td>
            <td>
                <input type="text" name="username" maxlength="30" />
            </td>
        </tr>
        <tr>
            <td>
                Email:
            </td>
            <td>
                <input type="text" name="email" />
            </td>
        </tr>
        <tr>
            <td>
                Password:
            </td>
            <td>
                <input type="password" name="pass1" />
            </td>
        </tr>
        <tr>
            <td>
                Password Again:
            </td>
            <td>
                <input type="password" name="pass2" />
            </td>
        </tr>
        <tr>
            <td>
                Bio:
            </td>
            <td>
                <textarea rows="9" cols="30" name="bio" form="register">Enter text here...</textarea><br />
            </td>
        </tr>
        <tr>
            <td>
                Avatar(<a href="#">Upload</a>):
            </td>
            <td>
                <input type="text" name="avatar" />
            </td>
        </td>
        </tr>
        <tr><td><br /><br /></td></tr>
        <tr>
            <td colspan="2">
                <button class="submit" type="button">Register</button>
                or <a href="users/login_form.php" class="cpanel">Log in</a>
            </td>
        </tr>
    </table>
</form>

它发布的文件之一（$ db是一个代表数据库的变量，它来自header.php文件）

<?php

include(dirname(dirname(__FILE__)) . '/includes/header.php');

//check all mandatory fields are filled out
if((isset($_POST['username']) && strlen($_POST['username']) > 0) && (isset($_POST['email']) && strlen($_POST['email']) > 0) && (isset($_POST['pass1']) && strlen($_POST['pass1']) > 0) && (isset($_POST['pass2']) && strlen($_POST['pass2']) > 0))
{
    //retrieve our data from POST
    $username = $_POST['username'];
    $email = $_POST['email'];
    $pass1 = $_POST['pass1'];
    $pass2 = $_POST['pass2'];
    $bio = $_POST['bio'];
    $avatar = $_POST['avatar'];
}
else
{
    $error = "You didn't enter all the required data.";
}
if($pass1 != $pass2)
    $error = "The passwords didn't match.";
    if(strlen($username) > 30)
        $error = "You entered to long of a username.";

    //create secure password(isn't important to the question)

    $email = filter_var($email, FILTER_SANITIZE_EMAIL);

    if(isset($error))
    {
        echo $error.'<br /><a href="users/register_form.php" class="cpanel">Retun to registration page</a>';
    }
    else
    {
        $success = $db->register_user($username, $email, $hash, $salt, $bio, $avatar);
        if($success === 1)
        {
            echo 'Row inserted';
        }
        else
        {
            echo 'An error occured while inserting into the database';
        }
    }
?>

我现在已经花了3个多小时来解决这个问题，所以如果我只是愚蠢，请告诉我。

$ .post后，JQuery .animate（width：'toggle'）无法正常工作

0 个答案: