jQuery使用bind动态绑定事件无效的处理方法


Posted in jQuery onDecember 11, 2018

最近在进行页面开发,在做页面特效的时候,需要给一个动态加载的按钮赋予一个事件

于是不假思索的 用$(obj).bind();  来绑定事件 。

但是这样存在一个问题:

bind确实能绑定事件,但是那是相对于固定的html标签来说

当页面内容属于动态加载的时候,bind事件就存在一个bug,  只能bind一次,当你第二次触发事件的时候就没用了

例如:

我给<a>标签赋予一个click , <a>标签包括内容都是从后台数据读取然后动态加载的。当我使用bind来绑定click事件,这时, 第一次点击click能成功触发

但是第二次点击,click事件无效了.

后面研究发现,jQuery还有个绑定事件的方法:delegate();  用法如下:

$(".sentnum-box").delegate(".a-add-ordergoods","click",function(){ 
  //js数据代码
});

这样就能实现对动态数据绑定事件,并永不失效

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
You might like
[转帖]PHP世纪万年历
2006/12/06 PHP
动态控制Table的js代码
2007/03/07 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python生成器generator用法示例
2018/08/10 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python右对齐的实例方法
2020/07/05 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
《春笋》教学反思
2014/04/15 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
python实现局部图像放大
2021/11/17 Python
Python中如何处理常见报错
2022/01/18 Python
mysql insert 存在即不插入语法说明
2022/03/25 MySQL