jQuery延迟（）函数不工作

我需要在密码更改时显示成功消息，即使增加延迟时间，问题是成功消息显示并立即消失。 为了测试你必须给相同的密码和确认密码值jQuery延迟（）函数不工作

下面是代码，

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

请帮助我，谢谢！

来源

2016-06-10 Balaji Ravichandran

可以使用带淡出“消失的东西”：$（“＃警报的味精”）。 fadeout（3000） – monterico

顺便说一句，使用'.show（）'和'.hide（）'确实会造成*轻微*的性能损失。如果你只是偶尔使用它，那么这并不是一个问题，但要注意的是，调用它会导致你的页面变慢。 – gcampbell

您是否尝试过非持续时间for.show（）和.hide（）？零持续时间可能不会被添加到动画队列中。 – nnnnnn

错误是与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

来源

2016-06-10 08:59:59 akinjide

在您的示例中，消息应该淡入淡出 –

我刚刚更新了带淡入淡出效果的codepen，并且还有一个延迟，以便用户可以在离开之前看到成功消息。 – akinjide

目前'e'缺少 – devnull69

问题是，由于该点击位于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; 
    });

来源

2016-06-10 08:51:31 phreakv6

或将按钮的类型更改为'button' – devnull69

@ devnull69上述代码正常工作，但我需要处理引导表单验证，这将在更改按钮类型时受到影响。是否有任何替代方法可以在不更改按钮的情况下实现 –

jQuery延迟（）函数不工作

回答

相关问题