html中自动触发事件

最新推荐文章于 2022-06-27 14:22:28 发布

beidaol

最新推荐文章于 2022-06-27 14:22:28 发布

阅读量2.3w

点赞数 1

本文链接：https://blog.csdn.net/beidaol/article/details/85726856

版权

问题

在编写前端代码的时候，进行某个操作后希望系统能自动触发一个动作，比如自动触发button的单击动作，此时可以使用jquery的trigger来实现，

如$('#button1').trigger("click"); 表示自动触发id为button1的单击动作

实例

在对表单进行完整性验证后单击提交，然后自动触发下面按钮的动作

运行开始的图

未输入信息便提交后的运行结果

完整输入，尚未提交的结果

提交后，自动触发按钮的单击事件的结果

代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
$().ready(function() {
   $("#button1").click(function(){
       alert("自动触发事件");
   });
   // 在键盘按下并释放及提交后验证提交表单
   $("#signupForm").validate({
       rules:{
           firstname:"required",
           lastname:"required",
           username:"required"
       },
       messages:{
           firstname:"firstname不能为空",
           lastname:"lastname不能为空",
           username:"username不能为空"
       },
       submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
           //alert("提交表单");
//form.submit(); //提交表单
$.ajax({

   success:function(data){
       $('#button1').trigger("click");
   }
});

}
   });

   });

</script>

</head>
<body>
   <form class="cmxform" id="signupForm" method="get" action="2.jsp">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="firstname">名字</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">用户名</label>
<input id="username" name="username" type="text">
</p>



<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>