javascript - .show() 方法没有像在 jquery 中应该的那样工作

Question

我有一个 div，它在 css(display:none;) 中没有显示，但是当我使用 jquery .show() 方法时，它只在页面上闪烁一秒钟。这是我的 html 代码

    <center><div style="margin-top:100px;margin-bottom:100px;border:1px solid black;">

    <div class="logIn" id="login">

  <form action="Login.php" method="post" name="login">

  <h4> Log into your Irokko Account </h4><br/>
  Username:<br/>
    <input type="text" name="username"><br/><br/>
  Password:<br/> 
    <input type="password" name="password"><br/><br/>
    <input type="submit" value="Log In" name="login">   <input id = "create" type="submit" name="account"      value="Create Account"> </form>

    <a href="#ForgotPassword" style="font-size:12px; color:blue;text-decoration:underline">Forgot Password</a>   <br><br/>
    <div id="ForgotPassword" class="modalDialog">
  <div>
  <a href="Login.php" title="Close" class="close">X</a>
 <h2>Retrieve Password</h2>
 <form action="Login.php" method="post" name="login">
 <p>Please enter your email address to retrieve your password.</p><br/><br/>
    <input type="email" name="email" size="65"><br/><br/>

    <input type="submit" value="Send" ><br><br>   
   </form>
     </div>
    </div>
   </div><br><br>   


  <div id="signup" class="hide">
   <form action="login.php" method="post" name="signup" onSubmit="return validatesignup();">

    Confirm Password:<br/>
    <input type="password" name="confirmpassword" size="40"><br/><br/> 
    Account Type:<br/>
    <select name="accounttype" class="width">

        <option></option>
        <option>Advertiser</option>
        <option>Publisher</option>
    </select><br/><br/>
    Company Name:<br/>
    <input type="text" name="companyname" size="40"><br/><br/>
    Email address:<br/>
    <input type="email" name="email" size="40"><br/><br/>
   Country:<br/>
    <input type="text" name="country" size="40"><br/><br/>

    <input  type="submit" name="createaccount" value="Create Account"><br><br>

这是我的CSS代码

    .hide{
          display:none;
         }

下面是jquery代码

    $(document).ready(function(){
        $(".hide").hide();

          $("#create").click(function(){

             $(".hide").show(); 

    });


 });

Answer 1

创建按钮是type="submit"。您需要在表单的“提交”事件中调用 event.preventDefault()(使该事件回调采用名为 event 的参数)，或者将带有 id="create"的输入更改为 类型=按钮。

我会将其更改为 type="button"，因为我怀疑您是否希望通过“Enter”按键来按下 Create。如果在表单中按下回车键，则默认为提交按钮。

创建表单“消失”，因为创建按钮的提交(重新)加载了 login.php 页面。