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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
es5 类与es6中class的区别小结
Nov 09 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的库,结果发现很多东西
2006/12/31 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python常见的pandas用法demo示例
2019/03/16 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
合同协议书格式
2014/04/18 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Golang: 内建容器的用法
2021/05/05 Golang
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang