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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jquery传参及获取方式(两种方式)
Feb 13 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
星际流派综述
2020/03/04 星际争霸
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
PHP7新特性简述
2017/06/11 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python在非root权限下的安装方法
2018/01/23 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
2014年计生协会工作总结
2014/11/21 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
门球健将观后感
2015/06/16 职场文书
正规欠条模板
2015/07/03 职场文书
获奖感言怎么写
2015/07/31 职场文书
小学教师教学反思
2016/02/24 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers