title: How can I trigger a 'focusout' after I click on an element?
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;select style="display:none"&gt;
      &lt;option value='1'&gt;1&lt;/option&gt;
      &lt;option vlaue='2'&gt;2&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="text" id="comboBox" /&gt;
  &lt;ul id="comboBoxData" style="display:none"&gt;
      &lt;li id='1'&gt;1&lt;/li&gt;
      &lt;li id='2'&gt;2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the following JQuery code:</p>
  
  <pre><code>$(document).ready(function() {
      $('select').each(function() {
          var parent = this;
          $('#comboBoxData').on('click', 'li', function() {
              var value = $(this).prop('id');
              $(parent).val(value);
              $('#comboBox').val(value);
          });
      });   
      $('#comboBox').bind('focusin', function () {
          $('#comboBoxData').show();
      });   
      $('#comboBox').bind('focusout', function () {
          $('#comboBoxData').hide();
      });
  });
  </code></pre>
  
  <p>When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?</p>