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

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

背景：模块没有使用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>

果然，问题解决了！

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