UpdatePanel和Jquery冲突的解决方法


Posted in Javascript onApril 01, 2013

在第一次页面加载时,元素A的X效果正常,点击B之后,页面局部刷新,此时,回到A,元素A失去X效果.

开始以为是前端我这到程序员那里出现问题,但仔细检查之后发现没有,后来了解了下页面应用了ASP.NET AJAX局部刷新,这就明朗了,估计是和JQUERY冲突了。

问题重现: 1.ASP.NET AJAX在页面中添加ScriptManager和UpdatePanel
2.在UpdatePanel中添加元素A
3.用jQuery对元素A添加X效果
4.在UpdatePanel中加一个Button B用作postback

这样问题就出现了。
分析1: UpdatePanel在应用中主要用于局部刷新,避免整个页面的Postback。UpdatePanel实现局部刷新的核心在于MicrosoftAjaxWebForm.js文件,它的局部刷新过程就是将页面提交到服务端(包含ViewState),执行服务端代码后异步将在UpdatePanel内的HTML进行重新呈现。在此过程中,页面的其它部分并没有状态更改。

分析2: jQuery可以通过简单的代码对HTML元素添加各种属性和事件句柄,我们可以在这里看到官方的文档: Tutorials:How jQuery Works

在这里,我们可以得知,jQuery有个重要的事件标记“ready”,一般对HTML元素的效果和事件句柄都通过这个ready事件来添加,如下: $(document).ready(function () { $(“p”).text(“The DOM is now loaded and can be manipulated.”); });

官方对此的说明是:ready事件会在DOM完全加载后运行一次,OK,至此,问题的原因差不多明白了:

原因: 因为在UpdatePanel局部刷新之后,其中的元素A被重写,而此时整个DOM树并没有重新加载,所以jQuery的ready事件并没有触发,所以元素A就失去了原有的特效。

解决方案: 我们可以将ready事件中执行的代码提取出来,然后通过捕获ScriptManager的EndRequest事件,在每次UpdatePanel局部刷新之后执行一次jQuery初始化代码,如下所示: <script type=”text/javascript” > function slide(){ //here is code } function load() { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); } function EndRequestHandler() { slide(); } </script >

最后就是需要 添加 <body onload="load()" >

Javascript 相关文章推荐
JS随机生成不重复数据的实例方法
Jul 17 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
Node实现搜索框进行模糊查询
Jun 28 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 #Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 #Javascript
表格单元格交错着色实现思路及代码
Apr 01 #Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 #Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 #Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 #Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 #Javascript
You might like
PHP中extract()函数的定义和用法
2012/08/17 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
js post提交调用方法
2014/02/12 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
vue的toast弹窗组件实例详解
2018/05/14 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python读写csv文件实例代码
2019/07/05 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
介绍一下write命令
2014/08/10 面试题
优秀经理事迹材料
2014/02/01 职场文书
关于运动会的稿件
2014/02/02 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书