如何使用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({
...
});">