Why my jquery code doesn't work with updatepanel post back?

Why my jquery code doesn't work with updatepanel post back?

Hello,
I'm new to jquery. I want to use jquery mask function to format my input.
Here is my original code:
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4.     <title></title>
  5.     <script src="../Scripts/jquery-1.11.3.js" type="text/javascript"></script>
  6.     <script src="../Scripts/jquery-maskmoney-3.0.2.js" type="text/javascript"></script>
  7.     <script type="text/javascript">       
  8.         $(document).ready(function() {
  9.             $('#<%=TextBox1.ClientID%>').attr('maxlength', 8).maskMoney({prefix:'$',thousands:',',precision:0,'placeholder':''});
  10.         });
  11.     </script>
  12. </head>
  13. <body>
  14.     <form id="form1" runat="server">
  15.     <asp:ScriptManager ID="SM" runat="server"></asp:ScriptManager>
  16.     <asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional">
  17.         <ContentTemplate>
  18.             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  19.             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
  20.         </ContentTemplate>
  21.     </asp:UpdatePanel>
  22.     </form>
  23. </body>
  24. </html>
This code doesn't work with my solution. so I change jquery part of code to the following code, then it works with first page load.
  2. <script type="text/javascript">       
  3.         jQuery(document).ready(function($) {
  4.             $('#<%=TextBox1.ClientID%>').attr('maxlength', 8).maskMoney({prefix:'$',thousands:',',precision:0,'placeholder':''});
  5.         });
  6.     </script>
But it still doesn't work with post back. So I reference this link:  Working with jQuery within the ASP.NET UpdatePanel.
I change my jquery code to the following:
  2. <script type="text/javascript">       
  3.         function InIEvent() {
  4.             $('#<%=TextBox1.ClientID%>').attr('maxlength', 8).maskMoney({prefix:'$',thousands:',',precision:0,'placeholder':''});
  5.         }
  6.         $(document).ready(InIEvent);
  7.     </script>
and change html page to:
  2. <form id="form1" runat="server">
  3.     <asp:ScriptManager ID="SM" runat="server"></asp:ScriptManager>
  4.     <script type="text/javascript">
  5.         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InIEvent);
  6.     </script>
  7.     <asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional">
  8.         <ContentTemplate>
  9.             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  10.             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
  11.         </ContentTemplate>
  12.     </asp:UpdatePanel>
  13.     </form>
Now all my code even doesn't work with first page load. So my question is what's the difference between
  2. jQuery(document).ready(function($) {
  3.             $('#<%=TextBox1.ClientID%>').attr('maxlength', 8).maskMoney({prefix:'$',thousands:',',precision:0,'placeholder':''});
  4.         });
and 
  2. function InIEvent() {
  3.             $('#<%=TextBox1.ClientID%>').attr('maxlength', 8).maskMoney({prefix:'$',thousands:',',precision:0,'placeholder':''});
  4.         }
  5.         $(document).ready(InIEvent);
Is there anything wrong with my code? Same code works with a brand new application.
Thanks for your helping.