实际情况:点击下箭头弹出列表,点击列表上的隐藏按钮隐藏列表。

背景:模块没有使用Js或者Jquery的Ajax功能,而是使用Asp.Net的Ajax控件——UpdatePanel + ScriptManager 的方式

问题:按钮均使用.Net的单击事件,页面加载时功能正常,当使用了如Ask后端事件返回后,前端的 Hide 功能失效

截图如下:

代码如下:

$(document).ready(function () {
RegisterJs();
}); function RegisterJs() { $(".NewestArea").hide(); //显示Note区域
$(".ShowNoteListArea").click(function () {
$(".NewestArea").hide("slow");
$(".NoteListArea").slideDown("slow");
}); //隐藏Note区域
$(".HideNoteListArea").click(function () {
$(".NewestArea").show("slow");
$(".NoteListArea").slideUp("slow");
return false;
});
}
<asp:UpdatePanel ID="UpdatePanelNoticeControl" runat="server">
<ContentTemplate> <!-- NoticeControl控件 -->
<div class="NoticeControl"> <!-- 最新Note区域 -->
<div class="NewestArea"> <!-- 点击显示Note区域 -->
<span class="ShowNoteListArea glyphicon glyphicon-chevron-down"></span> <!-- 最新Note标签 -->
<asp:Label ID="NewestShow" runat="server"></asp:Label> </div> <!-- NoteList区域 -->
<div class="NoteListArea">
<ul>
<li>
<ul>
<asp:Repeater ID="NoteList" runat="server">
<ItemTemplate>
<li>
<%#Eval("NoteContent")%>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
<li>
<asp:TextBox ID="TxtNoteContentValue" runat="server" TextMode="MultiLine" Width="500px" Height="50px"></asp:TextBox>
</li>
<li>
<!--<input class="HideNoteListArea ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" type="button" value="Hide" />-->
<asp:LinkButton ID="HideNoteListArea" CssClass="HideNoteListArea ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" runat="server">
<span class="glyphicon glyphicon-chevron-up" style="margin-right: -8px;"></span>
<span class="ButtonText">Hide</span>
</asp:LinkButton>
<asp:LinkButton ID="AskGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" OnClick="AskGo_Click" runat="server">
<span class="glyphicon glyphicon-question-sign" style="margin-right: -8px;"></span>
<span class="ButtonText">Ask</span>
</asp:LinkButton>
<asp:LinkButton ID="AnswerGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" OnClick="AnswerGo_Click" runat="server">
<span class="glyphicon glyphicon-info-sign" style="margin-right: -8px;"></span>
<span class="ButtonText">Answer</span>
</asp:LinkButton>
<asp:LinkButton ID="CompleteGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" OnClick="CompleteGo_Click" runat="server">
<span class="glyphicon glyphicon-ok-circle" style="margin-right: -8px;"></span>
<span class="ButtonText">Complete</span>
</asp:LinkButton>
<asp:Label ID="ResultShow" runat="server"></asp:Label>
</li>
</ul>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AskGo" />
<asp:AsyncPostBackTrigger ControlID="AnswerGo" />
<asp:AsyncPostBackTrigger ControlID="CompleteGo" />
</Triggers>
</asp:UpdatePanel>

后端事件省略。

——————————————————————————————————————————————————————

问题解决方案一:

该方法网络上均有提及,然而并没有解决我的问题(求圈子朋友帮忙解答),个人表示对原理还是半知不解,继续研究中。方法如下:

在每一个可能引起对前端Js影响的后端事件结束位置使用下面代码注册Js:

ScriptManager.RegisterClientScriptBlock(UpdatePanelNoticeControl, this.GetType(), "RegisterJs", "RegisterJs();", true);

——————————————————————————————————————————————————————

问题解决方案二:

百度另寻来方法:

因为Updatapanel没有postback,你的js不会重新加载。所以失效。更改你的页面代码如下就可以了:
<script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () { // re-bind your jquery events here
$(document).ready(function () {
RegisterJs();
}); }); $(document).ready(function () {
RegisterJs();
}); function RegisterJs() { $(".NewestArea").hide(); //显示Note区域
$(".ShowNoteListArea").click(function () {
$(".NewestArea").hide("slow");
$(".NoteListArea").slideDown("slow");
}); //隐藏Note区域
$(".HideNoteListArea").click(function () {
$(".NewestArea").show("slow");
$(".NoteListArea").slideUp("slow");
return false;
});
} </script>

果然,问题解决了!

但是到此时,问题的第一个解决方案没有行通,不免心不安,所以挂单求解答!圈子的大牛们,帮帮忙!我也继续到百度寻求答案!

Updatepanel 后端返回后,在 Updatepanel 内控件的前端 js 失效问题的更多相关文章

  1. WebForm服务器验证控件与前端js自定义验证共同使用

        问题: 前端aspx页面中需要在button中添加OnClientClick事件后,这个OnClientClick所执行的自定义的客户端js验证:这个时候,所有的服务器验证控件都会失效!   ...

  2. WinForm容器内控件批量效验是否同意为空?设置是否仅仅读?设置是否可用等方法分享

    WinForm容器内控件批量效验是否同意为空?设置是否仅仅读?设置是否可用等方法分享 在WinForm程序中,我们有时须要对某容器内的全部控件做批量操作.如批量推断是否同意为空?批量设置为仅仅读.批量 ...

  3. WinForm容器内控件批量效验是否允许为空?设置是否只读?设置是否可用等方法分享

    WinForm容器内控件批量效验是否允许为空?设置是否只读?设置是否可用等方法分享 在WinForm程序中,我们有时需要对某容器内的所有控件做批量操作.如批量判断是否允许为空?批量设置为只读.批量设置 ...

  4. Duilib 鼠标在某控件例如按钮上悬停后,对目标控件操作

    其实对WM_MOUSEHOVER消息的处理,因为WindowImplBase基类中对此消息未处理,所以在自己的窗口类中实现: .h文件中加入 LRESULT OnMouseHover( UINT uM ...

  5. Repeater事件OnItemCommand取得行内控件

    记录一下,主要是这句:TextBox txtNum = e.Item.FindControl("txtNum") as TextBox; Repeater真是太强了,太灵活.除了R ...

  6. TGraphicControl(自绘就2步,直接自绘自己,不需要调用VCL框架提供的函数重绘所有子控件,也不需要自己来提供PaintWindow函数让管理框架来调用)与TControl关键属性方法速记(Repaint要求父控件执行详细代码来重绘自己,还是直接要求Invalidate无效后Update刷新父控件,就看透明不透明这个属性,因为计算显示的区域有所不同)

    TGraphicControl = class(TControl) private FCanvas: TCanvas; procedure WMPaint(var Message: TWMPaint) ...

  7. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  8. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  9. 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用

    整理部分JS 控件  WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...

随机推荐

  1. 常用的头文件—— common.h

    #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/sta ...

  2. Senparc.Weixin.TenPay 正式发布

    微信支付刚出来的时候,和公众号的绑定关系很深(甚至旧版本使用的就是公众号的appId),随着微信生态的逐步丰富,微信支付越来越成为一个独立的平台,同时服务于公众号.小程序.开放平台.企业号/企业微信等 ...

  3. CentOS 7 - 更新JDK,删除旧JDK,安装新JDK

    一,检查是否安装JDK. yum list installed | grep java 二,删除旧JDK. yum -y remove java-1.7.0-openjdk* yum -y remov ...

  4. Windows下Tomcat内存占用过高问题跟踪(ProcessExplorer+jstack)

    一.问题描述 Tomcat下面部署很多个java项目的war包,tomcat启动一段时间后,发现cpu占用过高,整个界面卡死! 二.通过process explorer查看java进程下的线程 pro ...

  5. python写的压缩软件

    import tkinterimport tkinter.filedialogimport osimport zipfileimport tkinter.messagebox #创建住窗口root = ...

  6. GIT的初级使用

    安装git [root@localhost ~]# yum -y install git [root@localhost ~]# git --version git version 1.8.3.1 初 ...

  7. Mac OS Sierra如何打开任何来源

    我们知道在Mac升级到最新的Mac OS Sierra系统之后,随之而来的是第三方应用都无法打开,提示的是无法打开或扔进废纸篓.而在之前的版本系统中,我们知道在系统偏好设置-->安全性与隐私-- ...

  8. Google Chrome 书签导出并生成 MHTML 文件

    目的 因为某些原因需要将存放在 Google Chrome 内的书签导出到本地,所幸 Google Chrome 提供了导出书签的功能. 分析 首先在 Google Chrome 浏览器当中输入 ch ...

  9. Struts标签<bean:write><logic:iterate></logic:equal>的组合使用小例

    form表单中的一个下拉列表控件的代码如下 <select name="taskname" id="taskname" class="selec ...

  10. SonarQube 集成 GitLabCI

    本文是用于分析SonarQube代码的质量,每次在GitLab上提交代码时都使用GitLab-CI运行器进行检查. 1.SonarQube with GitLab 安装插件GitLab-plugin ...