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 replace方法去空格
May 08 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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入门速成教程
2007/03/19 PHP
PHP的拦截器实例分析
2014/11/03 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
高中生学习的自我评价
2013/12/14 职场文书
员工年终演讲稿
2014/01/03 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
就业证明函
2015/06/17 职场文书
《风筝》教学反思
2016/02/23 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis