title: JQuery UI datepicker triggered from text link
body: <p>I'm trying to setup my css menu so that one of the text links triggers a datepicker calandar to open.  I have stripped everything down to the code below.  The problem I am experiencing is that the code below does not work but when I remove the ul, li tags it starts working.</p>
  
  <p>I am using 1.8.0 JQuery and 1.8.23 JQuery UI.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $("#dp").datepicker({
          onSelect: function(dateText, inst) {
              alert(dateText);
          },
      });
  
      $("#datep").click(function() {
          $("#dp").datepicker("show");
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" id="datep"&gt;Test&lt;/a&gt;&lt;input type="hidden" id="dp" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Some weird things I have noticed.  If I move the input under the ul it works kind of but will get an error after a few clicks on and off but if I add empty div under that input then it will start working normally it seems.</p>
  
  <p>Any help is greatly appreciated.</p>