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日期范围选择器附源码下载
May 23 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
html中两种获取标签内的值的方法
Jun 16 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
js 通用订单代码
2013/12/23 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python中logging库的使用总结
2017/10/18 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python 字符串常用函数详解
2019/09/11 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
python属于解释型语言么
2020/06/15 Python
python 装饰器的使用示例
2020/10/10 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
化工专业大学生职业生涯规划书
2014/01/14 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
国际会计专业求职信
2014/08/04 职场文书
2014年化验员工作总结
2014/11/18 职场文书
工程主管竞聘书
2015/09/15 职场文书
员工工作心得体会
2019/05/07 职场文书