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

错误在于script，你需要将它包装在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>

这是指向codepen的链接：http://codepen.io/anon/pen/vKLdJj

Answer 2

问题是由于此次点击位于submit按钮上，因此会触发submit事件。在点击处理程序中返回false以停止传播。这很有效。

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

jQuery delay（）函数不起作用

2 个答案: