jQuery not working after postback

jQuery not working after postback

Could someone please help:

     I am very new to jQuery and I have come upon my first problem using the language.  I have a page that contains an asp.net checkbox and Panel, the panel contains a textbox that I use with the datepicker widget.   The datepicker is awesome but I need to toggle the display of the Panel depending on the state of the checkbox.

I came across a jQuery function that works great to accomplish this requirement but after postback the function no longer works.  Note:  all my controls are within a ASP updatepanel.  Also, I am using this line of code in my C# code behind if there's a postback.   "cal.Visible = chkByDate.Checked;".

Here is my code:

 <script type="text/javascript">

        $(function () {
            $('#<%= txtFromDate.ClientID %>').datepicker();

            // Hide/Display div when user checks or unchecks checkbox.
            $('#<%= chkByDate.ClientID %>').click(function(e) {
                var $divToHide = $('#<%= cal.ClientID %>');
                if (this.checked) $divToHide.show('fast');
                else $divToHide.hide('fast');
            });

        });       

 </script>

protected void Page_Load(object sender, EventArgs e)
 {
       if (!Page.IsPostBack)
       {
          LoadCustomers();
          LoadSalesReps();
          LoadProdCats();
          LoadWarehouse();
         chkByDate.Checked = true;
       }

       cal.Visible = chkByDate.Checked;
           
 }    

<asp:CheckBox ID="chkByDate" runat="server"/>
<asp:Panel id="cal" runat="server">
       Date: &nbsp
       <asp:TextBox ID="txtFromDate" runat="server"></asp:TextBox>
 </asp:Panel>