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 设计模式 安全沙箱模式
Sep 24 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
vue+iview实现手机号分段输入框
Mar 25 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
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
解密效果
2006/06/23 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
原生实现一个react-redux的代码示例
2018/06/08 Javascript
React 组件间的通信示例
2018/06/14 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python复制目录结构脚本代码分享
2015/03/06 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
大三自我鉴定范文
2013/10/05 职场文书
外贸主管求职简历的自我评价
2013/10/23 职场文书
数控技术应届生求职信
2013/11/13 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
档案信息化建设方案
2014/05/16 职场文书
秋冬农业生产标语
2014/10/09 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
MySQL中order by的使用详情
2021/11/17 MySQL
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android