UpdatePanel和Jquery冲突的解决方法

在第一次页面加载时，元素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()" >

赞 (0)

相关推荐

  • UpdatePanel和Jquery冲突的解决方法

    在第一次页面加载时,元素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用

  • StringTemplate遇见jQuery冲突的解决方法

    字段对于用户的输入则为字段,字段涉及到用户的输入,必定是控件.由于有以前项目word模板转化为在线展示输入经验(这里不仅仅是将word转化为html,还需要提取word书签作为关键字段,关键字段作为用户的输入,根据用户配置转化为文本框,下拉框,数字,货币框,时间等等可扩展控件).我在本次的模板设计中不再考虑服务器控件,因为服务器控件将生成一大堆难以控制的html标记.所以彻底疯狂了一把,采用完全html+jQuery实现(验证用的也是jQuery validator).关于流程的设计将会在后续慢

  • jQuery多个版本和其他js库冲突的解决方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery测试页</title> </head>

  • 模板视图和AngularJS之间冲突的解决方法

    本文实例讲述了模板视图和AngularJS之间冲突的解决方法.分享给大家供大家参考,具体如下: 问题: 在php的mvc视图中,我们需要在加载的过程中 传递一些数据给模板: 如: 这里是某个 controller $data['users'] = {something from databases}; $this->load->view('home/index',$data); 这里是对应的视图 <div ng-controller="loadData"> &l

  • ThinkPHP和UCenter接口冲突的解决方法

    本文分析了ThinkPHP和UCenter接口冲突的解决方法.分享给大家供大家参考,具体如下: 1.引出问题: 在UCenter中存在db和base两个类,恰巧这两个类也存在于ThinkPHP中,因此出现问题是必然的事情. db类:uc_client/lib/db.class.php base类:uc_client/model/base.php 2.问题解决方法: 只要消除"重名"即可解决,因此选择更改UCenter中的名称. 3.实际操作方法: db类: 更改db.class.php

  • innodb_index_stats导入备份数据时报错表主键冲突的解决方法

    故障描述 percona5.6,mysqldump全备份,导入备份数据时报错Duplicate entry 'hoc_log99-item_log_27-PRIMARY-n_diff_pfx01' for key 'PRIMARY' 故障原因 查看了下这个主键应该是MySQL系统库下的系统表innodb_index_stats mysql> show create table innodb_index_stats\G *************************** 1. row ****

  • PHP针对常规模板引擎中与CSS/JSON冲突的解决方法

    本文实例讲述了PHP针对常规模板引擎中与CSS/JSON冲突的解决方法,有一定的实用价值,具体分析如下: 本文主要针对对象为Smarty与Dwoo 在Smarty中经常会出现和CSS/JS的语法存在冲突的情况,因为二者都需要使用大括号{}.虽然可以改Smarty的界定符,但你在一个现存系统中,去修改所有相关代码,是不划算的.解决方法如下: 1. 避免同时出现 通过外部引用的方式避免.问题是避无所避.所以这种情况只适合少量简单的情况. 2. 修改Smarty界定符 3.可以使用Smarty的lit

  • Android ListView与ScrollView冲突的解决方法总结

    Android ListView与ScrollView冲突的解决方法总结 众所周知ListView与ScrollView都具有滚动能力,对于这样的View控件,当ScrollView与ListView相互嵌套会成为一种问题:  问题一:ScrollView与ListView嵌套导致ListView显示不全面  问题二:ScrollView不能正常滑动 解决方式一: ScrollView+LinearLayout+ListView可以换成ScrollView+LinearLayout+Linear

  • 外层竖向ScrollView,里层横向ScrollView滑动冲突的解决方法

    实例如下: public class CustomScrollView extends ScrollView { private GestureDetector mGestureDetector; View.OnTouchListener mGestureListener; @SuppressWarnings("deprecation") public CustomScrollView(Context context,AttributeSet attrs) { super(contex

  • android中view手势滑动冲突的解决方法

    android中view手势滑动冲突的解决方法

    Android手势事件的冲突跟点击事件的分发过程息息相关,由三个重要的方法来共同完成,分别是:dispatchTouchEvent.onInterceptTouchEvent和onTouchEvent. public boolean dispatchTouchEvent(MotionEvent ev) 这个方法用来进行事件的分发.如果事件传递到view,那么这个方法一定会被调用,返回结果受当前View的onTouchEvent和下级View的dispatchTouchEvent方法的影响,表示是

随机推荐