Question

我有一个在css中显示none的div（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"。您需要在表单的“submit”事件中调用event.preventDefault（）（使该事件回调采用名为event的参数），或者将id =“create”的输入更改为{{1} }。

我会将其更改为type=button，因为我怀疑您是否需要按“输入”按键才能按下“创建”。如果在表单中按下回车键，则提交按钮是默认设置。

创建表单“消失”，因为创建按钮的提交（重新）加载type="button"页面。

Answer 2

如果'#create'来自其他来源，请尝试此操作：Event Delegation

$(document).ready(function(){
    $(".hide").hide();
    $(document).on('click','#create',function(){
       $(".hide").show(); 
    });
});

Answer 3

为什么不完全删除.hide类，并将元素#create定位为：

$(document).ready(function(){
    $("#signup").hide();
    $("#create").click(function(){
        $("#signup").show(); 
    });
});

.show（）方法在jquery中不应该像它应该的那样工作

3 个答案: