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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
js实现3D图片展示效果
Mar 09 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
javascript Canvas动态粒子连线
Jan 01 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写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JavaScript File分段上传
2016/03/10 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
js微信支付实现代码
2016/12/22 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
python计算方程式根的方法
2015/05/07 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
火车的故事教学反思
2014/02/11 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js