javascript - jQuery延迟()函数不起作用

Question

我需要在更改密码时显示成功消息，问题是即使我增加延迟时间，成功消息也会显示并立即消失。为了进行测试，您必须提供相同的密码并确认密码值

这是代码，

<div class="modal-body">
    <div class="row">
       <div class="col-md-2"></div>.

           <!-- This is the div where I display message -->

          <div class="col-md-8" id="alert-msg" style="display: none;">
               <div style="text-align: center;" class="alert alert-success">
                  <strong>Success! Your Request Has Been Submitted!!</strong> 
                </div>  

            </div>
        </div>    

    <form class="form col-md-12 center-block" id="pass" method="GET" action="index.php">
          <div class="form-group">
              <input type="password" class="form-control input-lg" placeholder="Password" name="pass1" id="f_pass">
            </div>
            <div class="form-group">
              <input type="password" class="form-control input-lg" placeholder="Confirm Password" name="pass2" id="c_pass">
            </div>
            <div class="form-group">
              <button type="submit" id="msg-sub" class="btn btn-primary btn-lg btn-block">Submit</button>                 
            </div>
    </form>
</div>

这是脚本部分，

<script>
   $("#msg-sub").click(function(){
            var pass1= $("#f_pass").val();              
            if(pass1 !=='') {
                $('#alert-msg').show(0).delay(3000).hide(0);    
            }
    });         
</script>

这是url ,

请帮帮我，先谢谢了!!!

Answer 1

错误在于脚本，您需要将其包装在 jQuery .ready 方法中。您还需要使用 event.preventDefault()

来阻止点击处理程序传播

<script>
 $(document).ready(function(){
   $("#msg-sub").click(function(e){
     var pass1= $("#f_pass").val();              
     if(pass1 !=='') {
       $('#alert-msg').css('display', 'block').delay(3000).fadeOut(600);    
     }
     e.preventDefault();
   }); 
 });        
</script>

这是代码笔的链接:http://codepen.io/anon/pen/vKLdJj