--- title : 解決 UpdatePanel 中引用 Jquery 失效問題 tags: UpdatePanel、query 失效 creat-date: 2022-07-18 update_date : 2022-07-18 --- --- ## 解決 UpdatePanel 中引用 Jquery 失效問題 --- ### 一、問題 **在UpdatePanel中的日期，第一次載入時會有選單可以選擇，但按下「新增/修改經費來源」按鈕Postback後，其日期的選項即失效。** ```script= <script type="text/javascript"> $(document).ready(function () { $("#ucAllStart").datepicker(); $("#ucAllEnd").datepicker(); }) </script> ``` ![](https://i.imgur.com/oqbS3QE.png) ### 二、解決 **將ready事件中執行的Code移出，通過取得ScriptManager的EndRequest事件，在每次UpdatePanel局部刷新之後執行一次jQuery初始化Code，如下所示：** ```c#= <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link href="../../JS/calendar/base/jquery.ui.all.css" rel="Stylesheet" type="text/css" /> <script src="../../JS/calendar/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <script src="../../JS/calendar/jquery.ui.datepicker.js" type="text/javascript"></script> <script type="text/javascript"> function load() { DateRequestHandler(); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(DateRequestHandler); } function DateRequestHandler() { $("#ucAllStart").datepicker(); $("#ucAllEnd").datepicker(); } </script> </head> <body onload="load();"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> 全程起迄日期 <asp:TextBox ID="ucAllStart" CssClass="form-control btn_date" ClientIDMode="Static" autocomplete="off" runat="server" required="required"></asp:TextBox> <asp:TextBox ID="ucAllEnd" CssClass="form-control btn_date" ClientIDMode="Static" autocomplete="off" runat="server" required="required"></asp:TextBox> 計畫經費<br/> 預算別及經費 <asp:LinkButton ID="lbPriceSource" CssClass="btn btn-sm bg-blue text-white" OnClientClick="show_price_source();" runat="server"> <i class="fa-solid fa-pen"></i>新增/修改經費來源 </asp:LinkButton> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html> ``` ### 三、參考 來源：https://kingjoy1235.pixnet.net/blog/post/34775529