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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
基于javascript实现九九乘法表
2016/03/27 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
js实现碰撞检测
2021/01/29 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python ljust rjust center输出
2008/09/06 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
python中split方法用法分析
2015/04/17 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
军训自我鉴定100字
2014/02/13 职场文书
预备党员表决心书
2014/03/11 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
整改通知书格式
2015/04/22 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python