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>

果真，問題解決了！

可是到此時，問題的第一個解決方案沒有行通，難免心不安，因此掛單求解答！圈子的大牛們，幫幫忙！我也繼續到百度尋求答案！