Question

我有一个表单，用户可以在其中添加动态引导时间戳字段。

我正在使用Bootstrap timepicker（https://github.com/eternicode/bootstrap-datepicker）来获取将动态生成的时间戳输入字段

问题是，当点击任何一个datepicker元素（第一个除外）时，所有更改都只发生在第一个。

我的代码的HTML部分是：

<div class="row multi-field-wrapper">
    <div class="multi-fields">
        <div class="multi-field">
            <div class="form-group col-xs-12 col-sm-4">
                <div class="input-group">
                    <input type="text" name="ticket-price" maxlength="5" class="form-control" placeholder="FREE" >
                    <span class="input-group-btn">
                        <button class="btn btn-default add-field" type="button">+</button>
                    </span>
                    <span class="input-group-btn">
                        <button class="btn btn-default remove-field" type="button">-</button>
                    </span>
                </div>
            </div>

            <div class="row">
                <div class="form-group col-xs-6 col-sm-3">
                    <label>Start Date</label>
                    <input type="text" name="tstart-date" class="form-control tstart-date-picker" placeholder="">
                </div>

            </div>
        </div>
    </div>

</div>

Answer 1

问题是您使用jQuery附加的事件处理程序克隆DOM元素。当您尝试在新输入中选择日期时会导致麻烦，因为由datepicker绑定的事件会以某种方式与第一个输入中的原始内容混合。

修复非常简单：clone没有true参数，并且还使用委派的点击事件来添加新行。其余的不会改变：

$(this).on('click', '.add-field', function (e) {
    $('.multi-field:first-child', $wrapper).clone().appendTo($wrapper);
    $('.multi-field:last-child').find('input[name="tstart-date"]').val('');

    $('.multi-field:last .tstart-date-picker').datepicker({
        autoclose: true,
        format: 'dd-M-yyyy',
        todayHighlight: true,
    });
});

演示： http://jsfiddle.net/z2j6u8ro/2/

Answer 2

必须专门为每个元素分配日期选择器。试试这个：

  $(".add-field", $(this)).click(function(e) {

    (CODE TO ADD NEW FIELD HERE)

    $(.tstart-date-picker).each(function(){
        $(this).datepicker("destroy");
        $(this).datepicker({
            (DATEPICKER OPTIONS HERE)
        });
    });
  }

Bootstrap timepicker仅选择第一个timepicker元素

2 个答案: