title: function works only after second click
body: <p>i try to add a plugin (colorpicker or datepicker) for a input field.</p>
  
  <p>The form is gernerated later by an ajax call.</p>
  
  <p>If i click at first time in the input fields, nothing happens.</p>
  
  <p>After the second click, the function will work. What i do wrong?</p>
  
  <p>Thats the part of the js-file</p>
  
  <pre><code>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);      
  });
  </code></pre>
  
  <p>and thats the part of the html file</p>
  
  <pre><code>&lt;div class="col-md-2"&gt;
              &lt;label class="control-label"&gt;'.$lang['mod1'][98].'&lt;/label&gt;
              &lt;div class="entry input-group"&gt;
                  &lt;input id="gebdat" class="form-control date-picker" name="1_gebdat" type="text" value="'.$_POST['1_gebdat'].'"/&gt;
                  &lt;span class="input-group-btn"&gt;&lt;button class="btn btn-success" type="button"&gt;&lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>