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 相关文章推荐
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
Vue2.0权限树组件实现代码
Aug 29 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 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
农民和部队如何穿矿
2020/03/04 星际争霸
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
node.js 如何监视文件变化
2020/09/01 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python 搜索大文件的实例代码
2019/07/08 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
信用社员工先进事迹材料
2014/02/04 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
节能减耗标语
2014/06/21 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python