如何使用jQuery在克隆表单上显示日历

Question

我有一个使用Bootstrap-dateinput的日期输入区域

<div class="form-group row">
   <div class="col-xs-8">
      <label class="control-label">Date</label>
      <div class="input-group date" id="dp3" data-date="12-02-2014" data-date-format="mm-dd-yyyy">
         <input class="form-control" type="text" required="" placeholder="Date"  name="date[]" value="">
         <span class="input-group-addon">
         <i class="glyphicon glyphicon-calendar"></i>
         </span>
      </div>
   </div>
</div>

jQuery脚本要克隆此表单：

<script type="text/javascript">
            $( document ).on( 'click', '.btn-add', function ( event ) {
            event.preventDefault();

            var field = $(this).closest( '.form-group' );
            var field_new = field.clone();

            $(this)
                .toggleClass( 'btn-default' )
                .toggleClass( 'btn-add' )
                .toggleClass( 'btn-danger' )
                .toggleClass( 'btn-remove' )
                .html( '-' );

            field_new.find( 'input' ).val( '' );
            field_new.insertAfter( field );
        } );

    </script>

和显示日历的脚本：

<script type="text/javascript">
$('.input-group .date').datepicker({
...
    });
</script>

但是在创建新输入区域时，单击时不显示日历

我尝试添加onclick

$(".input-group .date").click(function(){
$('.input-group .date').datepicker({
...
});

但是似乎仍然存在一些问题，您能告诉我什么地方不对以及如何解决吗？

Answer 1

尝试这个：

<input class="form-control" type="text" required="" placeholder="Date"  name="date[]" value="" onclick="$(this).datepicker({
...
});">