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 相关文章推荐
浏览器常用高宽的jquery插件
Feb 24 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 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实现异步调用方法研究与分享
2011/10/27 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
Vue.js实现立体计算器
2020/02/22 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
详解Vue之计算属性
2020/06/20 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
20个常用Python运维库和模块
2018/02/12 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
暑期社会实践方案
2014/02/05 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers