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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
Vuex 入门教程
Jan 10 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
原生js实现九宫格拖拽换位
Jan 26 Javascript
深入理解Vue的数据响应式
May 15 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获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jQuery 使用手册(六)
2009/09/23 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
js实现一个简易计算器
2020/03/30 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Python 解析xml文件的示例
2020/09/29 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
毕业生求职的求职信
2013/12/05 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
竞赛口号大全
2014/06/16 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
大学生见习总结报告
2015/06/24 职场文书