title: How do I detect when a div has lost focus?
body: <p>Given the following markup, I want to detect when an editor has lost focus:</p>
  
  <pre><code>&lt;div class="editor"&gt;
      &lt;input type="text"/&gt;
      &lt;input type="text"/&gt;
  &lt;/div&gt;
  &lt;div class="editor"&gt;
      &lt;input type="text"/&gt;
      &lt;input type="text"/&gt;
  &lt;/div&gt;
  &lt;button&gt;GO&lt;/button&gt;
  </code></pre>
  
  <p><em>EDIT:</em> As the user tabs through the input elements and as each editor div loses focus (meaning they tabbed outside the div) add the loading class to the div that lost focus.</p>
  
  <p>This bit of jquery is what I expected to work, but it does nothing:</p>
  
  <pre><code>$(".editor")
  .blur(function(){
      $(this).addClass("loading");
  });
  </code></pre>
  
  <p>This seems to work, until you add the console log and realize it is triggering on every focusout of the inputs.</p>
  
  <pre><code>$('div.editor input').focus( function() {
      $(this).parent()
          .addClass("focused")
          .focusout(function() {
              console.log('focusout');
              $(this).removeClass("focused")
                     .addClass("loading");        
          });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/8s8ayv52/7/" rel="nofollow">Here is a jsfiddle</a> of my test case that I have been working on. I know I am missing something fundamental here. Can some one enlighten me?</p>
  
  <p><em>EDIT:</em> After some of the comments below, I have this almost working the way I want it. The problem now is detecting when focus changes to somewhere outside an editor div. Here is my current implementation:</p>
  
  <pre><code>function loadData() {
      console.log('loading data for editor ' + $(this).attr('id'));
      var $editor = $(this).removeClass('loaded')
          .addClass('loading');
  
      $.post('/echo/json/', {
          delay: 2
      })
          .done(function () {
          $editor.removeClass('loading')
              .addClass('loaded');
      });
  }
  
  $('div.editor input').on('focusin', function () {
      console.log('focus changed');
      $editor = $(this).closest('.editor');
      console.log('current editor is ' + $editor.attr('id'));
      if (!$editor.hasClass('focused')) {
          console.log('switched editors');
  
          $('.editor.focused')
              .removeClass('focused')
              .each(loadData);
  
          $editor.addClass('focused');
      }
  })
  </code></pre>
  
  <p>A bit more complicated, and using classes for state. I have also added in the next bit of complexity which is to make an async call out when an editor loses focus. <a href="http://jsfiddle.net/0y2dvxpf/" rel="nofollow">Here a my jsfiddle</a> of my current work.</p>