---
# System prepended metadata

title: 解決 UpdatePanel 中引用 Jquery 失效問題
tags: [UpdatePanel、query 失效]

---

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