木头人的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头像

分享到:

最近浏览
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日
最代码贡献等级说明
王庆乾wdq10月11日
最代码贡献等级说明
锐雯萌萌10月11日
暂无贡献等级
心印语10月11日
最代码贡献等级说明
FloridaH10月10日
暂无贡献等级
uuu121010月10日
最代码贡献等级说明
Watson10月10日
最代码贡献等级说明
yuzhipeng10月9日
暂无贡献等级
1369308808910月9日
最代码贡献等级说明
暂无贡献等级
最代码广告位
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友