jquery事件绑定方式和bug解决

news/2024/7/10 23:57:22 标签: js, jquery

绑定方式

方式一

<p>哈哈</p>
$("p").bind("click",function(){$(this).hide();});
或
$("p").bind("click",event1);
function event1(){
	$(this).hide();
}

方式二

$("#submit").click(function  () {
				
			})

方式三

$("#submit").on("click",function  () {
				
			})

解绑

$("button").unbind("click");//解除button的所有点击事件
$("button").unbind("click",event1);//解除button指定的点击事件

bug跳坑

创建登入对象loginObj,编写提交表单函数_submit(),在初始化函数init()中为按钮添加单击事件监听,但是如果用// $("#submit").bind("click",_that._submit()) // $("#submit").click(_that._submit()) // $("#submit").on("click",_that._submit()的方式添加事件页面一刷新,没有点按钮就会立即执行点击事件,用另外三种种方式则不会

// 登入对象
	var loginObj = {
		
		// 初始化
		init:function  () {
			var _that = this
			
			$("#submit").bind("click",_that._submit())  //可以
			
			$("#submit").click(function  () {
				_that._submit()//不可以
			})
			
			$("#submit").on("click",_that._submit())//可以
			
		},
		
		// 判空
		isNull:function  () {
			
			if ($.trim($("#userName").val()) == "") {
			
				alert("用户名不能为空")
				return false
			} else
			
			if ($("#passWord").val() == "") {
			
				alert("密码不能为空")
				return false
			
			} else
			
			if ($("#act_code").val() == "") {
			
				alert("动态密码不能为空")
				return false
			
			} 
			
			return true
			
		},
		// 判断长度
		isLength:function  () {
			
			// 用户名小于1或者大于20
			if ($.trim($("#userName").val()).length < 1 ||
				$.trim($("#userName").val()).length > 20) {
			
				alert("请输入1-20长度的用户名")
				return false
			} else
			
			if ($.trim($("#passWord").val()).length < 6 ||
				$.trim($("#passWord").val()).length > 16) {
			
				alert("请输入6-216长度的密码")
				return false
			}
			
			return true
			
		},
		
		
		// 判断格式 正则
		
		// 网络请求
		
		// 提交事件
		_submit:function () {
			/**
			 * 判空和长度只要有一方不满足条件retuan  就不执行后面的网络请求
			 * 
			 */
			console.log("56789");
			if (!(this.isNull()&&this.isLength())) {
				return 
			}
			
			// 获取表单数据
			var userName = $.trim($("#userName").val())
			var passWord = $.trim($("#passWord").val())
			var act_code = $.trim($("#act_code").val())
			
			//整合数据
			var registerDto = {
				"userName": userName,
				"passWord": passWord,
				"act_code": act_code,
			}
			console.log(registerDto)
			
			// 发送网络请求
			// var res = req.submit_register(registerDto)//获取整个ajax
			// 	res = res.responseText//拿取responseText
			// 	res = JSON.parse(res)//转js对象
			// 	console.log(res);
				
			//根据返回数据判断是否注册成功并对用户做出对应提示
			
		}
	} 
	
	// 启动函数
	loginObj.init();window.onload = function  () {
	
	
	// 登入对象
	var loginObj = {
		
		// 初始化
		init:function  () {
			var _that = this
			
			
			// 可以
			$("#submit").bind("click",function  () {
				_that._submit()
			})  //可以
			
			$("#submit").click(function  () {
				_that._submit()//不可以
			})
			
			$("#submit").on("click",function  () {
				_that._submit()
			})
			
			//不可以
			
			// $("#submit").bind("click",_that._submit())  
			// $("#submit").click(_that._submit())
			// $("#submit").on("click",_that._submit())
		},
		
		// 判空
		isNull:function  () {
			
			if ($.trim($("#userName").val()) == "") {
			
				alert("用户名不能为空")
				return false
			} else
			
			if ($("#passWord").val() == "") {
			
				alert("密码不能为空")
				return false
			
			} else
			
			if ($("#act_code").val() == "") {
			
				alert("动态密码不能为空")
				return false
			
			} 
			
			return true
			
		},
		// 判断长度
		isLength:function  () {
			
			// 用户名小于1或者大于20
			if ($.trim($("#userName").val()).length < 1 ||
				$.trim($("#userName").val()).length > 20) {
			
				alert("请输入1-20长度的用户名")
				return false
			} else
			
			if ($.trim($("#passWord").val()).length < 6 ||
				$.trim($("#passWord").val()).length > 16) {
			
				alert("请输入6-216长度的密码")
				return false
			}
			
			return true
			
		},
		
		
		// 判断格式 正则
		
		// 网络请求
		
		// 提交事件
		_submit:function () {
			/**
			 * 判空和长度只要有一方不满足条件retuan  就不执行后面的网络请求
			 * 
			 */
			console.log("56789");
			if (!(this.isNull()&&this.isLength())) {
				return 
			}
			
			// 获取表单数据
			var userName = $.trim($("#userName").val())
			var passWord = $.trim($("#passWord").val())
			var act_code = $.trim($("#act_code").val())
			
			//整合数据
			var registerDto = {
				"userName": userName,
				"passWord": passWord,
				"act_code": act_code,
			}
			console.log(registerDto)
			
			// 发送网络请求
			// var res = req.submit_register(registerDto)//获取整个ajax
			// 	res = res.responseText//拿取responseText
			// 	res = JSON.parse(res)//转js对象
			// 	console.log(res);
				
			//根据返回数据判断是否注册成功并对用户做出对应提示
			
		}
	} 
	
	// 启动函数
	loginObj.init();
	
}




http://www.niftyadmin.cn/n/936528.html

相关文章

Effective C++ 43,44

43.明智地使用多继承。 多继承带来了极大的复杂性。最主要的一条就是二义性。 当派生类为多继承时&#xff0c;其多个基类有同名的成员时&#xff0c;就会出现二义性。通常要明白其使用哪个成员的。显式地限制修饰成员不仅非常笨拙&#xff0c;并且会带来限制。当显式地用一个类…

uniapp带参跳转页面大全

uni.navigateTo(OBJECT) //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({url: test?id1&nameuniapp }); uni.redirectTo(OBJECT) 关闭当前页面&#xff0c;跳转到应用内的某个页面。 uni.redirectTo({url: test?id1 }); uni.reLaunch(OBJECT) 关闭所有页…

一次性取消Word中所有超链接

一次取消WORD中所有超链接 三种方法&#xff0c;任意选用其中之一&#xff1a; 1. 第一种方法&#xff1a; 1、选中文档中的所有内容&#xff0c;也可以应用快捷键CtrlA。 2、按下快捷键CtrlShiftF9&#xff0c;即可扫除文档中的所有超链接。需要留意的是CtrlShiftF9组合键的作…

uni-search-bar简单搜索效果

预期思路&#xff1a;input框内容变化&#xff0c;调用input方法 拿到输入框的值发送到后端&#xff0c;接收到后端的数据&#xff0c;再利用this保存&#xff0c;但是input方法里没有this指向 uni-search-app组件很不错&#xff0c;样式好看&#xff0c;功能齐全&#xff0c;…

SAP_ALV

调用功能模块&#xff1a;CALL FUNCTION REUSE_ALV_GRID_DISPLAYEXPORTINGi_interface_check 接口一致性检查i_callback_program sy-repid 当前程序名is_layout layout 输出样式it_fieldca…

ajax获取本地json的方法及填坑

实现步骤 json文件 {"first":[{"id":"1","sex":"男"},{"id":"2","sex":"男"},{"id":"3","sex":"男"},{"id":"4",…

CentOS系统时间与现在时间相差8小时解决方法

很多网友在安装完CentOS系统后发现时间与现在时间相差8小时&#xff0c;这是由于我们在安装系统的时选择的时区是上海&#xff0c;而CentOS默认bios时间是utc时间&#xff0c;所以时间相差了8小时。这个时候的bios的时间和系统的时间是不一致的&#xff0c;一个代表 utc 时间&a…

struts2 json 定义全局Date格式

使用struts2的json插件时&#xff0c;自己定义日期格式经常使用的方式是在get属性上加入JSON注解&#xff0c;这个对于少量Date属性还能够&#xff0c;可是假设date字段多了&#xff0c;总不可能去给每一个date get方法加入json注解吧&#xff01; 发现极大不便后查看了sturts-…