title: jquery-ui datepicker with jquery .on() event
body: <p>i'm using asual <a href="http://www.asual.com/jquery/address/samples/tabs/#Overview" rel="nofollow noreferrer">jquery-address, tabs example</a> and want to add datepicker to the "Extra" tab.
  If i'm just adding </p>
  
  <pre><code>$(document).ready(function() {
      $( "#datepicker" ).datepicker();
  });
  </code></pre>
  
  <p>it wont work. So i found out i have to use .live().
  As im using jquery-1.7 .live() has <a href="http://blog.jquery.com/2011/11/03/jquery-1-7-released/" rel="nofollow noreferrer">changed</a> to .on().</p>
  
  <p>If i add this code datepicker only works on the second click.</p>
  
  <pre><code>$(document).ready(function() {
    $(document).on('click', '#datepicker', function () {
      $(this).datepicker();
    });
  });
  </code></pre>
  
  <p>I saw in <a href="https://stackoverflow.com/questions/4644907/jquery-datepicker-with-onclick-event">another thread</a> a not recommended way to make it work like this</p>
  
  <pre><code>$(document).ready(function() {
    $(document).on('click', '#datepicker', function () {
      $(this).datepicker().datepicker( "show" );
    });
  });
  </code></pre>
  
  <p>How am i using it correctly? Is there a recommended way to make datepicker work like i want in this example?</p>
  
  <p>I think i need to use .on() because i want to reload the form that's including #datepicker with a .load() event.</p>