Search code examples
jquerytimepicker

BootstrapTimepicker is not Working on Dynamically Generated Fields

BootstrapTimePicker is not working on input field which is generated Dynamically using jquery.

I have generated the dynamic fields in the form using jquery in which one of the field is using bootstraptimepicker that field is not working. I don't know why. I have included the code and attached the image below.

Layout Image

<div class="form-group input_fields_wrap">
  <div class="control-label col-sm-2">Booking time <span class="red">*</span></div>
  <div class="input-group bootstrap-timepicker timepicker col-sm-3 " style="padding-left: 10px; padding-right: 9px; float:left">
    <input id="ScheduledTime" type="text" name="bookingtime[]" class="form-control input-sm ScheduledTime">
    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="control-label col-sm-2">Booking Count <span class="red">*</span></div>
  <div class="col-sm-1">
    <input id="bookingcount" type="number" min="0" name="bookingcount[]" class="form-control input-sm">

  </div>
  <div class="clearfix"></div>
</div>
<div class="form-group">
  <div class="control-label col-sm-2"><button type="button" class="add_field_button fa fa-plus btn btn-info"></button></div>
  @*
  <div class="control-label col-sm-2"><button type="button" class="remove_field fa fa-plus btn btn-info">&times;</button></div>*@



</div>


---------- Script---------------
<script>
  $(document).ready(function() {

    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
      e.preventDefault();
      if (x < max_fields) { //max input box allowed
        x++; //text box increment

        $(wrapper).append('<div><br/><a href="#" class="remove_field">Remove</a><div class="control-label col-sm-2">Booking time <span class="red">*</span></div><div class="input-group bootstrap-timepicker timepicker col-sm-3 " style="padding-left: 10px; padding-right: 9px; float:left"><input id="ScheduledTime" type="text" name="bookingtime[]" class="form-control input-sm ScheduledTime"><span class="input-group-addon"><i class="fa fa-clock-o"></i></span></div><div class="control-label col-sm-2">Booking Count <span class="red">*</span></div><div class="col-sm-1"><input id="bookingcount" type="number" min="0" name="bookingcount[]" class="form-control input-sm"></div><div class="clearfix"></div></div>');
      }
    });

    /*Generating Dynamic Fields */
    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
      e.preventDefault();
      $(this).parent('div').remove();
      x--;
    })
  })
  $(".ScheduledTime").timepicker();
</script>

Solution

  • I found the answer myself. I just reinitialized the $(".ScheduledTime").timepicker(); after the line that generates dynamic fields inside the button click event which is generating dynamic fields on addmore click. Thanks for the Help folks :)

            var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();


            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                debugger;
                $(wrapper).append('<div><br/><a href="#" class="remove_field">Remove</a><div class="control-label col-sm-2">Booking time <span class="red">*</span></div><div class="input-group bootstrap-timepicker timepicker col-sm-3 " style="padding-left: 10px; padding-right: 9px; float:left"><input id="ScheduledTime" type="text" name="bookingtime[]" class="form-control input-sm ScheduledTime"><span class="input-group-addon"><i class="fa fa-clock-o"></i></span></div><div class="control-label col-sm-2">Booking Count <span class="red">*</span></div><div class="col-sm-1"><input id="bookingcount" type="number" min="0" name="bookingcount[]" class="form-control input-sm"></div><div class="clearfix"></div></div>');

                $(".ScheduledTime").timepicker();

            }
        });