Run jQuery code on AutoPostBack = true?

Question

I have some jQuery code that applies a phone number mask to a text field in a form:

<script type="text/javascript" src="../../../js/jquery.maskedinput.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $.mask.definitions['~'] = '[+-]'; $('.phone').mask('[phone]'); }); </script> 

It works great when the user first enters the form or if use refreshes the page. However, there is a DropDownList that will allow users to choose a different delivery address. This DropDownList has the AutoPostBack property set to true.

  <tr id="trAddressBook" runat="server"> <th>Ship To:</th> <td> <asp:DropDownList ID="AddressBook" runat="server" Width="200px" DataTextField="Value" DataValueField="Key" AppendDataBoundItems="true" AutoPostBack="true"> <asp:ListItem Text="Billing Address" Value="0" /> <asp:ListItem Text="New Address" Value="-1" /> </asp:DropDownList> </td> </tr> 

Whenever a user selects a parameter from this DropDownList, the phone mask jQuery code is no longer displayed in the text box (number) of the phone number. I do not see any errors while checking the page in Google Chrome.

Is there a way to save the mask code for the phone whether the user is using DropDownList or not?

Here is the Page_Load function from the code behind:

  protected void Page_Load(object sender, EventArgs e) { // DETERMINE IF THE SHIPPING FORM MUST BE INITIALIZED bool initShipAddress; if (Page.IsPostBack) { // ON POSTBACK, WE ONLY INITIALIZE THE SHIPPING FORM IF THE ADDRESS SELECTION WAS CHANGED initShipAddress = (Request.Form["__EVENTTARGET"] == AddressBook.UniqueID); } else { // ON FIRST VISIT, WE INITIALIZE SHIPPING FORM IF THE SHIPPING ADDRESS IS NOT THE BILLING initShipAddress = (GetShippingAddressId() != _User.PrimaryAddress.Id); } if (initShipAddress) InitializeShippingAddress(); } 

Answer 1

Maybe I'm wrong, since I worked with ASP.NET for a long time, but I believe that you can just change $(document).ready(function () { ... }); on $(window).load(function() { ... });

 $(window).load(function () { $.mask.definitions['~'] = '[+-]'; $('.phone').mask('[phone]'); }); 

Otherwise, ASP.NET performs a function called pageLoad every time the page loads:

 function pageLoad() { $.mask.definitions['~'] = '[+-]'; $('.phone').mask('[phone]'); };