title: .blur() of two select boxes
body: <p>I'm currently working on some admin tool with a table. When I click a field it will make it editable. But I have several fields where I have more than one select box or text field. The problem is that a handler is called when one select box or a text field blurs.</p>
  
  <p>I tried checking if any of the desired object has focus, but it seems that the blur event gets fired before a new element has the focus.</p>
  
  <p>To provide an example:</p>
  
  <p>My HTML code looks like this:</p>
  
  <pre><code>&lt;form&gt;
  &lt;select id="edit"&gt;
  &lt;!-- Options... --&gt;
  &lt;/select&gt;
  &lt;select id="edit2"&gt;
  &lt;!-- Options... --&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is some of my js:</p>
  
  <pre><code>$(document).on("blur", "select.edit", finishEdit);
  $(document).on("blur", "select.edit2", finishEdit);
  
  // Some later point in the code
  
  function finishEdit()
  {
    if(!($("select.edit:focus").length || $("select.edit2:focus").length))
    {
      // This should NOT be called if I just focus edit2! But it does!!
    }
  }
  </code></pre>
  
  <p>So I start off by having edit selected. I can easily edit it. But if I now try to select edit2 my blur event from edit will be called. Ok. this should not a big deals since I'm checking if the other drop down is selcted. But at this point edit2 is NOT yet focused and so my check fails and the code is called, which removes the drop downs and sends the updates!</p>
  
  <p>So how could I make this work? Basically, how do I prevent the blur event from firing if I put the focus on another valid element?</p>
  
  <p>(I hope it's more clear now...)</p>