title: This Hide function works when click anywhere on document except for elements using jQuery UI MultiSelect Widget
body: <p>I am styling a few Select elements with unordered () HTML lists and this function should hide those elements when a user clicks anywhere outside of the element's area, but for some reason it isn't working when the user clicks on elements which use the <a href="http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/" rel="nofollow">jQuery UI MultiSelect Widget</a>.</p>
  
  <p><strong>UPDATE</strong> - I created a jsfiddle to demonstrate the problem <a href="http://jsfiddle.net/chayacooper/ezxSF/4/" rel="nofollow">http://jsfiddle.net/chayacooper/ezxSF/4/</a> Click to open the item labeled <em>'UL Element'</em> - If you either mouseover any of the dropdown items for the <em>'UL Element'</em> or click on the document or on the other element it works as expected, but it remains opens if you click on the <em>'MultiSelect Element'</em> without mousing over any of the <em>'UL Element'</em> items.</p>
  
  <pre><code>$('html').click(function(e){
    if(e.target.id == 'dropdown_box1') {
              $("#select1").show();
    } else {
              $("#select1").hide();
    }
   });
  </code></pre>
  
  <p>I've also tried creating a separate function to close that element if a user clicks on a multiselect element, but that didn't work either.</p>
  
  <pre><code>$('.multiselect').click(function() {
      $("#select1").hide();
  });      
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="dropdown_box1"&gt;&lt;span&gt;Select&lt;/span&gt;&lt;/div&gt;
  &lt;div class="dropdown_container" id="dropdown_container1"&gt;  
      &lt;ul id="select1"&gt; 
          &lt;!-- Several List Item Elements --&gt; 
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a separate mouseleave function which hides the list element when the user mouses off of it, but that doesn't get fired if a user clicks to open it but doesn't mouseover the list element.   </p>
  
  <pre><code>    $(document).ready(function () {
          $("#dropdown_box1").click(function () {
              $("#select1").show();
          });
          var timeoutID;
          $("#select1").mouseleave(function () {
                timeoutID = setTimeout(function () {
                    $("#select1").hide();
              }, 800);
          });
            $("#select1").mouseenter(function () {
              clearTimeout(timeoutID);
          });
       });
  </code></pre>