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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery实现抽奖功能
Oct 22 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中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python重新引入被覆盖的自带function
2014/07/16 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
python fabric使用笔记
2015/05/09 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python使用fork实现守护进程的方法
2017/11/16 Python
python+flask实现API的方法
2018/11/21 Python
python 遍历pd.Series的index和value
2019/11/26 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
学术诚信承诺书
2014/05/26 职场文书
酒店员工手册范本
2015/05/14 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技