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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JS原型与继承操作示例
May 09 Javascript
JS实现在线ps功能详解
Jul 31 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/08/21 无线电
深入解析php中的foreach函数
2013/08/31 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
iframe实用操作锦集
2014/04/22 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
解析Python中的__getitem__专有方法
2016/06/27 Python
用Python读取几十万行文本数据
2018/12/24 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
大学生自荐书范文
2013/12/10 职场文书
公司端午节活动方案
2014/02/04 职场文书
伊索寓言教学反思
2014/05/01 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
企业法人代表证明书
2014/09/27 职场文书
2014年客房部工作总结
2014/11/22 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
Python函数中的不定长参数相关知识总结
2021/06/24 Python
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang