Question

我有一个简单的表单，可以在打开和关闭时显示动画：

<html><head><style type="text/css">
#contactFormContainer
            {
                width:300px;
                margin-top:15px;
            }
            #contactForm
            {
                margin-top:15px;
                width:300px;
                border:solid 1px #4d3a24;
                display:none;
            }
            #contactForm fieldset
            {
                padding:20px;
                border:none;
            }      
            #contactForm label
            {
                display:block;
            }      
            #contactForm input[type=text]
            {
                display:block;
                border:solid 1px #4d3a24;
                width:100%;
                margin-bottom:10px;
                height:24px;
            }  
            #contactForm textarea
            {
                display:block;
                border:solid 1px #4d3a24;
                width:100%;
                margin-bottom:10px;
            }  
            #contactForm input[type=submit]
            {
                background-color:#4d3a24;
                border:solid 1px #23150c;
                color:#FFFFFF;
                padding:5px;
                cursor:pointer;
                float: right;
            }                
            #contactLink
            {
                height:15px;
                width:218px;
                background-image:url('../images/signup.png');
                cursor:pointer;
            }
            #messageSent
            {
                color:#bc0d1b;
                display:none;
            }
</style>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#contactLink").click(function(){
        if ($("#contactForm").is(":hidden")){
            $("#contactForm").slideDown("slow");
        }else{
            $("#contactForm").slideUp("slow");
        }
    });

});

function closeForm(){
    $("#messageSent").show("slow");
    setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
}
</script>

</head><body>



    <div id="contactFormContainer">
        <div id="contactLink"></div>
        <div id="contactForm">
            <form action="test2.php" enctype="multipart/form-data" method="post">
            <fieldset>
                <label for="name">Name *</label>
                <input id="name" type="text" name="name" />
                <label for="email">Email address *</label>
                <input id="email" type="text" name="email" />
                <input id="sendMail" type="submit" name="signupSubmit" />
                <span id="messageSent"></span>
            </fieldset>
            </form>
        </div>
    </div>



</body>
</html>

问题在于，如果我在第一个字段集上方添加<form action="test2.php" enctype="multipart/form-data" method="post"> - 然后关闭表单......我的结束动画将不再有效。

TL; DR

我点击提交，表格以精美的方式结束
我添加了<form>代码，以便我可以处理POST
关闭动画不再有效

为什么，我该如何解决？

Answer 1

当您有表单时，按下按钮会转换为表单提交，而不是onclick。您需要截取表单提交事件，如下所示：

$("form").submit(function(event) { do animation here } )

Answer 2

Freenode的#jquery频道中的冷头回答了以下内容：http://jsfiddle.net/d9AfJ/7/

当我添加<form>标签时，为什么我的jquery不起作用？</form>

2 个答案: