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

您需要在新添加的字段上重新初始化时间选择器。

//AFTER adding new field
$('#my-new-dynamic-element').timepicker()

Answer 2

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

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

Answer 3

我自己找到了答案。我刚刚重新初始化了 $(".ScheduledTime").timepicker(); 在按钮单击事件中生成动态字段的行之后，该事件在添加更多单击时生成动态字段。感谢大家的帮助:)

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

            }
        });

BootstrapTimepicker 不适用于动态生成的字段

BootstrapTimepicker is not Working on Dynamically Generated Fields

jquery

timepicker