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 相关文章推荐
最佳JS代码编写的14条技巧
Jan 09 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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数组最大值,最小值的代码
2011/10/31 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
犀利的js 函数集合
2009/06/11 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
checkbox使用示例
2013/08/23 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
Python 实现try重新执行
2019/12/21 Python
Python API len函数操作过程解析
2020/03/05 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
运行时异常与一般异常有何异同?
2014/01/05 面试题
培训讲师邀请函
2014/01/10 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
企业趣味活动方案
2014/08/21 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014年调度员工作总结
2014/11/19 职场文书