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插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
移动端js触摸事件详解
Sep 18 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
javascript实现点击小图显示大图
Nov 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
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
使用js画图之画切线
2015/01/12 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python实现12306火车票查询器
2017/04/20 Python
python查询mysql,返回json的实例
2018/03/26 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
制药工程专业个人求职自荐信
2014/01/25 职场文书
六查六看自查材料
2014/02/17 职场文书
职务聘任书范文
2014/03/29 职场文书
生产文员岗位职责
2014/04/05 职场文书
房屋认购协议书
2015/01/29 职场文书
《三国志》赏析
2019/08/27 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis