Question

What I am trying to do is to test when an element (a SELECT) loses its focus if the focus has been transfered to another specific element (another SELECT). I want to trigger something when the focus is lost and is not on one of the two.

The problem is I test in the first select when it has lost the focus (with the blur event) if the other select has it, but the DOM is not yet updated.

Here’s an exemple of what I did:

$select1.on("blur", function() {
    if($select2.is(":focus"))
    {
         // do something
    }
    else
    {
        // do something else
    }
});

$select1 and $select2 are just two variables that contain the element. I read that JQuery adds an identifier “:focus” when an element gains the focus, but the way I did it, it doesn’t work.

In all cases, it goes into the else “do something else”.

Answer 1

Matt is right about the order of events but you can be a little more creative.

For example use a setTimeout to delay the check for blur so you know you already fired your focus. Simple.

$select1.on("blur", function() {
  window.setTimeout(function() {
    if($select2.is(":focus"))
    {
       // do something
    }
    else
    {
      // do something else
    }
  },100);
});

Try that one.