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 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
Vue header组件开发详解
2018/01/26 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
Python线程指南详细介绍
2017/01/05 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python的列表List求均值和中位数实例
2020/03/03 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
搞笑征婚广告词
2014/03/17 职场文书
财政局个人年终总结
2015/03/03 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
决心书格式及范文
2019/06/24 职场文书