ajax更新数据后,jquery、jq失效问题


Posted in Javascript onMarch 16, 2011

给元素绑定click事件 ,但是遇到一个问题 就是 当我执行一些ajax请求后 这个click事件就失效了

比如说 我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了

其实 原因很简单

ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,后加载的就没有绑定

解决方法 有两个 :

1. 在ajax请求成功之后重新绑定
2. 用live方法

<script type="text/javascript"> 
<!-- 
jQuery(document).ready(function(){ 
jQuery(".brand li img").live('click',function(){ jQuery(this).parents("li").find("ul").slideToggle(); 
}); 
}); 
--> 
</script>

两种方法适用在不同的场合

如果是处理事件的话 可以用live
如果是其他一些处理方法的 live就不支持 只能重新绑定

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
初识JQuery 实例一(first)
Mar 16 #Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 #Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 #Javascript
jQuery前台数据获取实现代码
Mar 16 #Javascript
最短的IE判断代码
Mar 13 #Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 #Javascript
js中巧用cssText属性批量操作样式
Mar 13 #Javascript
You might like
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python配置grpc环境
2019/01/01 Python
python实现键盘输入的实操方法
2019/07/16 Python
关于python中remove的一些坑小结
2021/01/04 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
.NET概念性的面试题
2012/02/29 面试题
保险内勤岗位职责
2014/04/05 职场文书
森林防火宣传标语
2014/06/27 职场文书
颐和园英文导游词
2015/01/30 职场文书
大学生党员个人总结
2015/02/13 职场文书
网吧管理制度范本
2015/08/05 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript