代码之家 › 专栏 › 技术社区 › Kovid Purohit

BootstrapTimepicker无法处理动态生成的字段

timepicker jquery

Kovid Purohit · 技术社区 · 8 年前

BootstrapTimePicker 不处理使用动态生成的输入字段 jquery

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

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>

3 回复 | 直到 8 年前

Amir Koklan Ramesh 8 年前

你需要在正确的事件中使用on,我想这就是你做错的地方。假设你有 body 作为包装器,您可以通过以下方式选择新创建的输入元素: .bootstrap-timepicker input ,这样你就可以实现你想要的:

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

ProEvilz 8 年前

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

Kovid Purohit 8 年前

我自己找到了答案。我刚刚重新初始化了$(“.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();

            }
        });