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自定义图片上传插件实例代码
Apr 04 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery实现雪花飘落效果
Aug 02 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
学习PHP session的传递方式
2016/06/15 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
python多线程下信号处理程序示例
2019/05/31 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
高一生物教学反思
2014/01/17 职场文书
个人现实表现材料
2014/02/04 职场文书
母亲节感恩寄语
2014/02/21 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python