BootstrapTimepicker不能处理动态生成的字段

Question

BootstrapTimePicker无法处理使用jquery动态生成的输入字段。

我使用jquery在表单中生成了动态字段，其中一个字段使用bootstraptimepicker，该字段不起作用。我不知道为什么。我已经包含了代码并附上了下面的图片。

<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>

Answer 1

你需要使用正确的事件，这就是我认为你做错了。 假设你有body作为包装，你可以通过.bootstrap-timepicker input选择新创建的输入元素，这样你就可以实现你想要的东西：

$('body').on('DOMNodeInserted', ".bootstrap-timepicker input", function() {
        $(".bootstrap-timepicker input").timepicker();
});

Answer 2

我自己找到了答案。我只是重新初始化了$（“。ScheduledTime”）。timepicker（）; 在按钮单击事件内生成动态字段的行之后，在addmore上生成动态字段。感谢帮助人员：）

        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();

            }
        });