title: jQuery - do something if text input clicked when it already has focus
body: <p>I am trying to make a search box with an auto-suggest panel that comes down if the user clicks on the search box once it already has focus.  I have tried checking $("#search_box").is(":focus"), and using the following code, both of which had the same problem:</p>
  
  <pre><code>var fade_in=function() {
      $("#search_panel").fadeIn(100);
  };
  
  $(document).ready(function() {
      $("#search_panel").fadeOut(100);
  
      $("#search_box").focus(function() {
          $(this).on("click", fade_in);
      });
  
      $("#search_box").blur(function() {
          $(this).off("click", fade_in);
  
          $("#search_panel").fadeOut(100);
      });
  });
  </code></pre>
  
  <p>it seems that the order of the events makes it so that the search panel always comes up on the first click - the order is:</p>
  
  <ul>
  <li>the user clicks the search box</li>
  <li>it comes into focus</li>
  <li>the click handler is added</li>
  <li>and then the click event fires causing the panel to appear</li>
  </ul>
  
  <p>whereas I was hoping it would be:</p>
  
  <ul>
  <li>the user clicks the search box</li>
  <li>the click event is fired</li>
  <li>the box comes into focus, so the click handler is added</li>
  <li>nothing happens yet, as the handler wasn't added when the click event occurred.</li>
  </ul>
  
  <p>On the second click, the panel should appear as the input box will already have focus.</p>
  
  <p>Here is the current code: <a href="http://jsfiddle.net/DtfYq/" rel="nofollow">http://jsfiddle.net/DtfYq/</a></p>