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技术技巧大全(五)
Jan 22 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 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(2)
2006/10/09 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
javascript 播放器 控制
2007/01/22 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python通过future处理并发问题
2017/10/17 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Python如何给函数库增加日志功能
2020/08/04 Python
浅析Python的命名空间与作用域
2020/11/25 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
中文专业毕业生自荐信
2014/05/24 职场文书
中国世界遗产导游词
2015/02/13 职场文书
校本培训个人总结
2015/02/28 职场文书
员工手册董事长致辞
2015/07/29 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
Python 中random 库的详细使用
2021/06/03 Python