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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
Java 生成随机字符的示例代码
Jan 13 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
javascript 写类方式之二
2009/07/05 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
python绘制双柱形图代码实例
2017/12/14 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python sys.argv[]用法实例详解
2018/05/25 Python
Python 变量的创建过程详解
2019/09/02 Python
导致python中import错误的原因是什么
2020/07/01 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电