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 对象比较实现代码
Apr 27 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
用PHP实现图象锐化代码
2007/06/14 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
33道php常见面试题及答案
2015/07/06 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Python备份Mysql脚本
2008/08/11 Python
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
AOP的定义以及作用
2013/09/08 面试题
教师廉洁自律承诺书
2014/05/26 职场文书
个人违纪检讨书
2014/09/15 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python