title: jQuery Datepicker only firing if I first click on another input field
body: <p>I'm having some strange behaviour when using the datepicker. When I load the page, and directly click on the datepicker input, nothing happens. When I click again, nothing happens. But when I click on another input field and then try again the datepicker field, it'll show up.</p>
  
  <p>The issue showed up, after I put the datepicker trigger into a live function, because I have input which will be dynamically generated.</p>
  
  <p>This is my code:</p>
  
  <pre><code>$(".date").on('click', function() {
      $(this).datepicker({
          dateFormat: "dd.mm.yy",
          altField: $(this).closest("td").find(".dateFormated"),
          altFormat: "yy-mm-dd"
      })
  })
  </code></pre>
  
  <p>Edit: I have seen that <code>live()</code> is deprecated as of 1.7. I therefore switched <code>live()</code> for <code>on()</code>. Didn't solve the issue though.</p>
  
  <p>Whole Html</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html" /&gt;
      &lt;meta name="author" content="gencyolcu" /&gt;
  
      &lt;title&gt;Untitled 1&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://localhost:8082/ivy/page/designer/ZWM$1/css/cupertino/jquery-ui-1.9.2.custom.css" /&gt;
      &lt;script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/js/jquery-ui-1.9.2.custom.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              counter = 0;
  
              $("#addRow").click(function() {
                  counter++;
  
                  rowHtml = '\
                  &lt;tr class="datarow" id="row' + counter + '"&gt;\
                      &lt;td&gt;&lt;input type="text" class="date" /&gt;&lt;input type="text" class="dateFormated" /&gt;&lt;/td&gt;\
                      &lt;td&gt;&lt;input type="text" class="from" /&gt;&lt;/td&gt;\
                      &lt;td&gt;&lt;input type="text" class="to" /&gt;&lt;/td&gt;\
                      &lt;td&gt;\
                          &lt;select class="type"&gt;\
                              &lt;option value="1"&gt;Typ 1&lt;/option&gt;\
                              &lt;option value="2"&gt;Typ 2&lt;/option&gt;\
                          &lt;/select&gt;\
                      &lt;/td&gt;\
                      &lt;td class="removeRow" id=' + counter + '&gt;X&lt;/td&gt;\
                  &lt;/tr&gt;';
  
                  $('#submitButton').before(rowHtml);
              })
  
              $(".removeRow").live("click", function() {
                  id = $(this).attr("id");
                  $("#row" + id).remove();
              })
  
              $("[name=formZeitdaten]").submit(function(i) {
                  values = "";
                  $(".datarow").each(function(j) {
                      tr = $(this);
                      date = tr.find('td').find('.date').val();
                      from = tr.find('td').find('.from').val();
                      to = tr.find('td').find('.to').val();
                      type = tr.find('td').find('.type').val();
                      values = values + date + ',' + from + ',' + to + ',' + type + ';';
                  })
                  console.log(values);
                  $("[name=dataset]").val(values);
              })
  
              $("#slider").slider({
                  range: true,
                  min: 0,
                  max: 1440,
                  step: 15,
                  values: [30, 210],
                  slide: function(event, ui) {
                      $(".date").val(ui.values[0] + ":" + ui.values[1]);
                  }
              });
  
              $(".date").on('click', function() {
                  $(this).datepicker({
                      dateFormat: "dd.mm.yy",
                      altField: $(this).closest("td").find(".dateFormated"),
                      altFormat: "yy-mm-dd"
                  })
              })
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;span id="test"&gt;&lt;/span&gt;
  &lt;form name="formZeitdaten" method="post"&gt;
      &lt;table id="zeitdaten"&gt;
          &lt;tr&gt;
              &lt;td&gt;Datum&lt;/td&gt;
              &lt;td&gt;Von&lt;/td&gt;
              &lt;td&gt;Bis&lt;/td&gt;
              &lt;td&gt;Typ&lt;/td&gt;
              &lt;td id="addRow"&gt;&lt;input type="button" value="Hinzufügen" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="datarow"&gt;
              &lt;td&gt;&lt;input type="text" class="date" /&gt;&lt;input type="text" class="dateFormated" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="from" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="to" /&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;select class="type"&gt;
                      &lt;option value="1"&gt;Typ 1&lt;/option&gt;
                      &lt;option value="2"&gt;Typ 2&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr id="submitButton"&gt;
              &lt;td&gt;&lt;input type="submit" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  &lt;div id="slider"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>