zoukankan      html  css  js  c++  java
  • [转]jquery与updatepanel二次失效问题解决方案

    现在越来越多的朋友喜欢将jQuery和ASP.NET AJAX 一起来用,最近,许多印度人在forum里抱怨说UpdatePanel和jQuery不兼容,许多jQuery效果在UpdatePanel更新之后就 不work。本篇通过分析两者的框架结构来解决这个兼容性问题。

    问题重现: 1. 在页面中添加ScriptManager和UpdatePanel2. 在UpdatePanel中添加元素A3. 用jQuery对元素A添加X效果4. 在UpdatePanel中加一个Button B用作postback 结果:在第一次页面加载时,元素A的X效果正常,点击B之后,页面局部刷新,此时,元素A失去X效果
    分析1:UpdatePanel

    UpdatePanel在应用中主要用于局部刷新,避免整个页面的Postback。

    UpdatePanel实现局部刷新的核心在于MicrosoftAjaxWebForm.js文件,它的局部刷新过程就是将页面提交到服务端(包 含ViewState),执行服务端代码后异步将在UpdatePanel内的HTML进行重新呈现。

    在此过程中,页面的其它部分并没有状态更改。

    分析2:jQuery

    可以通过简单的代码对 HTML元素添加各种属性和事件句柄,我们可以在这里看到官方的文档:

    Tutorials:How jQuery Works
    http://docs.jquery.com/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 load() {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    }function EndRequestHandler() {
    ReadyFunction1();
    ReadyFunction2();
    ReadyFunction3();
    }
    </script><body onload="load()">

     

    原文:http://www.huomo.cn/developer/article-36b2.html

  • 相关阅读:
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    冒泡排序和选择排序
  • 原文地址:https://www.cnblogs.com/puzi0315/p/2467480.html
Copyright © 2011-2022 走看看