A timepicker javascript stops working when the page does postback ASP.NET

Question

I have an update panel in my page.aspx, and inside the update panel I have textbox with bootstrap timepicker, I show an example:

      <asp:UpdatePanel runat="server" id="upd1">
                <ContentTemplate>
 <div class="form-group">
                    <div class="row col-md-12 col-md-offset-0">
                        <label class="control-label">Monday</label>                            
                    </div>
                </div>

                <div class="form-group col-md-3">
                    <div class="input-group bootstrap-timepicker timepicker input-sm">
                        <asp:TextBox runat="server" ID="txtFecIni_1" class="form-control input-small "></asp:TextBox>
                        <span class="input-group-addon "><i class="fa fa-clock-o"></i></span>
                    </div>
                </div>

                <div class="form-group col-md-3">
                    <div class="input-group bootstrap-timepicker timepicker input-sm">
                        <asp:TextBox runat="server" ID="txtFecFin_1" class="form-control input-small "></asp:TextBox>
                        <span class="input-group-addon "><i class="fa fa-clock-o"></i></span>
                    </div>
                </div>

              </ContentTemplate>
                </asp:UpdatePanel>

Under the </ form> of my page I add this javascript code:

       <script type="text/javascript">
        window.onload = function () {
  $('#txtFecIni_1').timepicker({
                minuteStep: 30,
                defaultTime: false,
                showMeridian: false
            });

            $('#txtFecFin_1').timepicker({
                minuteStep: 30,
                defaultTime: false,
                showMeridian: false
            });
}

    </script>

    <script src="js/jquery-2.2.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-timepicker.js"></script>

The timepicker works properly until an object is thrown autopostback. How can I solve this? Thanks.

Answer 1

I solve my problem at this way:

I change window.onload = function () for function pageLoad() like that:

Before:

     <script type="text/javascript">
        window.onload = function () {
  $('#txtFecIni_1').timepicker({
                minuteStep: 30,
                defaultTime: false,
                showMeridian: false
            });

            $('#txtFecFin_1').timepicker({
                minuteStep: 30,
                defaultTime: false,
                showMeridian: false
            });
}

    </script>

After:

 <script type="text/javascript">
          function pageLoad() {
  $('#txtFecIni_1').timepicker({
                minuteStep: 30,
                defaultTime: false,
                showMeridian: false
            });

            $('#txtFecFin_1').timepicker({
                minuteStep: 30,
                defaultTime: false,
                showMeridian: false
            });
}

    </script>

I read that the Pageload is called on every postback. Hopefully this will be helpful to someone