木头人的gravatar头像
木头人2017-09-29 20:38:14
jquery绑定事件遇到的坑

       做了一个弹出框效果,弹出框里是一个表单,开始的时候要查询数据库是否存在记录,如果不存在,表单下面的提交按钮触发click事件发起创建记录的请求。如果数据库存在记录,就把记录数据查询出来,显示在表单里面,点击表单下面的按钮,此时发起修改记录的请求。

       无非是做了一个判断,但是第一次操作正常:不存在记录->填写表单->点击按钮触发create的请求;第二次操作的时候完全懵逼了,发起query请求发现有记录->显示在表单中->修改表单数据->点击按钮触发modify请求。结果发现数据库又插入了一条记录。这两次如果不注意很容易进入误区,因为前台和后台都不报错。但是如果我再次点击弹出框时就不一样了,查询出了两条记录,后台返回的是一个对象。服务器报错了。找了好久,都搞不明白为什么会在第二次触发两个事件呢。最后不得不怀疑是不是绑定事件的问题。百度了一下:jQuery的事件覆盖问题。才醍醐灌顶:jQuery会把绑定的事件放进一个数组里面,不是想得那样会覆盖掉。同样是click事件,它会依次叠加,这样只会越来越多,按照我的逻辑。

       原生js不会出现这个问题,会覆盖以前的事件:

var btn=document.getElementById("btn");
btn.onclick=function(){
	alert("我是事件1");
};
btn.onclick=function(){
	alert("我是事件2");
};

这个只会弹出第二个alert提示。

jQuery的事件我们怎么写:

/*方式1:*/
$("#btn").click(function(){
	alert("我是事件1");
});
$("#btn").click(function(){
	alert("我是事件2");
});

/*方式2:*/
$("#btn").on("click",function(){
	alert("我是事件1");
});
$("#btn").on("click",function(){
	alert("我是事件2");
});

结果都会出现两个alert提示。那怎么办,只能移除事件了。查看了一下资料,发现jQuery的一些方法支持移除事件。根据jQuery不同的版本,有die,off,unbind和它们对应的绑定事件live,on和bind。上面的代码就变成了下面的:

$("#btn").on("click",function(){
	alert("我是事件1");
});
$("#btn").off("click").on("click",(function(){
	alert("我是事件2");
});

这样就不会出现事件链了。


打赏

已有2人打赏

最代码客服的gravatar头像最代码官方的gravatar头像

分享到:

最近浏览
暂无贡献等级
coding喵11月3日
最代码贡献等级说明
甜心宝宝 LV111月2日
最代码贡献等级说明
thisme11月2日
暂无贡献等级
dujiucheng10月28日
暂无贡献等级
wupujian10月27日
最代码贡献等级说明
Luis虎子10月26日
最代码贡献等级说明
nsq000610月25日
最代码贡献等级说明
1820283820810月16日
暂无贡献等级
Mine偏执狂10月16日
暂无贡献等级
erpeng10月16日
暂无贡献等级
筱进GG LV310月15日
最代码贡献等级说明
李洋Ayato10月13日
最代码贡献等级说明
a78474808310月13日
最代码贡献等级说明
WangLin9_810月13日
暂无贡献等级
ZhangSH10月12日
最代码贡献等级说明
zuidaima_kyu10月12日
暂无贡献等级
mySong10月12日
最代码贡献等级说明
kirito66610月12日
最代码贡献等级说明
王庆乾wdq LV210月11日
最代码贡献等级说明
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友