JQUERY的效果在UpdatePanel中控件回发后失效的解决方案

最新推荐文章于 2021-02-22 06:09:37 发布

转载最新推荐文章于 2021-02-22 06:09:37 发布 · 699 阅读

收录于

学习_代码_windows_dotNet

本文介绍了解决ASP.NET UpdatePanel导致的jQuery事件绑定失效问题的方法。通过在UpdatePanel回发后重新绑定jQuery事件，确保了jQuery效果正常运行。文章提供了具体的实现代码示例。

在做.NET开发时，现在都常用UPDATEPANEL。这次项目中加入了Jquery的使用，但有些Jquery的效果在和UpdatePanel一起使用后，在UpdatePanel中有控件发生了PostBack事件后，Jquery的事件绑定就会失效。
解决方法：
1、先是在UpdatePanel中控件PostBack回发之后再重新注册一次Jquery的事件绑定。

    function reload() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    }

    function EndRequestHandler() {
         //这里放JQUERY的事件绑定的代码，等于是再复制一段之前的JQUERY代码
    }
2、然后在后台的Page_Load()里：
    this.RegisterStartupScript("呵呵", "<script type=\"text/javascript\">reload();</script>");

或者在页面<body onload="load();">

示例代码:

页面代码（部分）:

<head runat="server">
    <META http-equiv=content-type content="text/html; charset=utf-8" />
    <title>OrderHere-Order</title>
    <link href="../App_Themes/DefaultThemes/css.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" language="javascript" src="../Javascript/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="../Javascript/tooltip.js"></script>
<style type="text/css">
.x_img, .x_screen {border:1px solid #ccc; padding:10px; margin:5px; font-size:12px;}
.x_img ul, .x_img li { list-style:none; padding:0; margin:0}
.x_img li {float:left; border:1px solid #eee; padding:5px; margin:5px; }
.x_img img {border:none; width:100px; height:75px;display:block;}
.x_preview {position:absolute; border:1px solid #ccc; background:#333;padding:5px;display:none;color:#fff;}
.x_preview p {margin:0; padding:0; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif;word-break:break-all; width:180px}
.x_clear {clear:both}
</style>
   <script language="JavaScript">
         javascript:window.history.forward(1);
    </script>
</head>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>

                                                    </ContentTemplate>
                                             <Triggers>
                                                <asp:AsyncPostBackTrigger ControlID="dltProductCategory" EventName="SelectedIndexChanged" />
                                             </Triggers>

                                             </asp:UpdatePanel>

</form>

</body>

后台部分：

   protected void Page_Load(object sender, EventArgs e)
        {
            this.RegisterStartupScript("呵呵", "<script type=\"text/javascript\">load();</script>");

}

可以解决在，update之后，jQuery效果失效的问题

标签

#jquery #function #javascript #postback #border