Jquery blur doesn't work in Firefox and Chrome but works in IE9
<p>I have this HTML code which simulates a dropdown multi-checkbox</p>

<pre><code>&lt;div&gt;
   &lt;div class="select"&gt;
       &lt;span&gt;Select something&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="no-display select-list"&gt;
       &lt;div&gt;
          &lt;label class="unchecked" for="value1"&gt;
             Value1
          &lt;/label&gt;
          &lt;label class="unchecked" for="value2"&gt;
             Value2
          &lt;/label&gt;
       &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And javascript:</p>

<pre><code>  $(".select").live("click", function () {
     $(".select-list").toggleClass("no-display").focus();
  });

  $(".select-list").live("blur", function () {
     $(this).addClass("no-display");
  });
</code></pre>

<p>But in Firefox and Chrome, the blur event doesn't work, but works in IE9.</p>

<p>I want, when clicking outside <code>select-list</code> element, to close it (means make it invisible).</p>

<p>I used <code>blur</code> event after assigned <code>focus</code> on that element.</p>

<p>Could you show me the good approach to do that ?</p>

<p>Thanks</p>
