.show()方法无法像预期的那样工作 [英] .show() method is not working like it is supposed to in jquery

问题描述

我有一个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(); 

    });


 });

解决方案

创建按钮为type="submit".您需要在表单的"submit"事件中调用event.preventDefault()(使该事件回调采用名为event的参数)，或将id ="create"的输入更改为type=button.

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

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

I have a div which is displaying none in css(display:none;) but when I use the jquery .show() method it only flashes on the page for a second. here is my html code

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

And here is my css code

    .hide{
          display:none;
         }

And below is the jquery code

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

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

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

    });


 });

解决方案

The create button is type="submit". You need to either call event.preventDefault() in the "submit" event of the form (making that event callback take a parameter called event), or change that input with id="create" to type=button.

I would change it to type="button", because I doubt you would want an "Enter" keypress to press Create. Submit buttons are the default if the enter key is pressed in the form.

The create form "disappears" because the create button's submit (re)loads the login.php page.

这篇关于.show()方法无法像预期的那样工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！