UpdatePanel和Jquery冲突的解决方法
在第一次页面加载时,元素A的X效果正常,点击B之后,页面局部刷新,此时,回到A,元素A失去X效果.
开始以为是前端我这到程序员那里出现问题,但仔细检查之后发现没有,后来了解了下页面应用了ASP.NETAJAX局部刷新,这就明朗了,估计是和JQUERY冲突了。
问题重现:1.ASP.NETAJAX在页面中添加ScriptManager和UpdatePanel
2.在UpdatePanel中添加元素A
3.用jQuery对元素A添加X效果
4.在UpdatePanel中加一个ButtonB用作postback
这样问题就出现了。
分析1:UpdatePanel在应用中主要用于局部刷新,避免整个页面的Postback。UpdatePanel实现局部刷新的核心在于MicrosoftAjaxWebForm.js文件,它的局部刷新过程就是将页面提交到服务端(包含ViewState),执行服务端代码后异步将在UpdatePanel内的HTML进行重新呈现。在此过程中,页面的其它部分并没有状态更改。
分析2:jQuery可以通过简单的代码对HTML元素添加各种属性和事件句柄,我们可以在这里看到官方的文档:Tutorials:HowjQueryWorks
在这里,我们可以得知,jQuery有个重要的事件标记“ready”,一般对HTML元素的效果和事件句柄都通过这个ready事件来添加,如下:$(document).ready(function(){$(“p”).text(“TheDOMisnowloadedandcanbemanipulated.”);});
官方对此的说明是:ready事件会在DOM完全加载后运行一次,OK,至此,问题的原因差不多明白了:
原因:因为在UpdatePanel局部刷新之后,其中的元素A被重写,而此时整个DOM树并没有重新加载,所以jQuery的ready事件并没有触发,所以元素A就失去了原有的特效。
解决方案:我们可以将ready事件中执行的代码提取出来,然后通过捕获ScriptManager的EndRequest事件,在每次UpdatePanel局部刷新之后执行一次jQuery初始化代码,如下所示:<scripttype=”text/javascript”>functionslide(){//hereiscode}functionload(){Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);}functionEndRequestHandler(){slide();}</script>
最后就是需要添加<bodyonload="load()">
相关文章
- jquery setvalue_jquery on方法
- jQuery remove()方法的用法
- Jquery调用webService远程访问出错的解决方法
- jQuery的Ajax时无响应数据的解决方法
- ASP.NET中使用后端代码注册脚本生成JQUERY-EASYUI的界面错位的解决方法
- 解决3.01版的jquery.form.js中文乱码问题的解决方法
- jquery的ajax()函数传值中文乱码解决方法介绍
- jQuery淡入淡出png图在ie8下有黑色边框的解决方法
- JQuery操作tr和td内容的方法实例
- 『jQuery』名称冲突使用noConflict方法解决
- JQuery获取json数据$.getJSON方法的实例代码
- jquery动态改变onclick属性导致失效的问题解决方法
- 多个jquery.datatable共存,checkbox全选异常的快速解决方法
- JQuery中使用Ajax赋值给全局变量异常的解决方法
- jQuery:delegate中select()不起作用的解决方法(实例讲解)
- jquery提交form表单时禁止重复提交的方法
- JQuery为页面Dom元素绑定事件及解除绑定方法
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- JQuery控制div外点击隐藏而div内点击不会隐藏的方法
- jQuery中Ajax的load方法详解
- jquery事件preventDefault()方法用法实例
- jquery库文件略庞大用纯js替换jquery的方法