功能仅在第二次单击后才起作用

Question

我尝试为输入字段添加插件（colorpicker或datepicker）。

该表格后来被ajax电话召唤出来。

如果我第一次在输入字段中点击，则没有任何反应。

第二次点击后，该功能将起作用。我做错了什么？

这是js文件的一部分

var datePickerOptions = {
format: 'dd.mm.yyyy',
changeMonth: true,
changeYear: true,
autoclose: true,
todayHighlight: true   
}
$(document).ready(function () {
$('.date-picker').datepicker(datePickerOptions);    
 });
$(document).on('click','.date-picker', function() {
   $('.date-picker').datepicker(datePickerOptions);      
});

那就是html文件的一部分

<div class="col-md-2">
            <label class="control-label">'.$lang['mod1'][98].'</label>
            <div class="entry input-group">
                <input id="gebdat" class="form-control date-picker" name="1_gebdat" type="text" value="'.$_POST['1_gebdat'].'"/>
                <span class="input-group-btn"><button class="btn btn-success" type="button"><span class="glyphicon glyphicon-th"></span></button></span>
            </div>
          </div>