Updatepanel 后端返回后，在 Updatepanel 内控件的前端 js 失效问题

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

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

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

截图如下：

.png]



.png]



代码如下：

$(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>

果然，问题解决了！

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