如何检测div何时失去焦点？

给定以下标记，我想检测编辑器何时失去焦点：

<div class="editor">
    <input type="text"/>
    <input type="text"/>
</div>
<div class="editor">
    <input type="text"/>
    <input type="text"/>
</div>
<button>GO</button>

编辑：随着用户通过输入元素进行制表，以及每个编辑器div失去焦点（这意味着他们在div之外进行制表），将加载类添加到失去焦点的div中。

jQuery的这一部分是我期望的工作，但是它什么也没做：

$(".editor")
.blur(function(){
    $(this).addClass("loading");
});

在添加控制台日志并意识到它在输入的每个焦点外触发之前，这似乎是可行的。

$('div.editor input').focus( function() {
    $(this).parent()
        .addClass("focused")
        .focusout(function() {
            console.log('focusout');
            $(this).removeClass("focused")
                   .addClass("loading");        
        });
});

这是我一直在努力的测试用例的jsfiddle。我知道我在这里缺少一些基本的东西。有人可以启发我吗？

编辑：在下面的一些评论后，我几乎以我想要的方式工作了。现在的问题是检测焦点何时更改为编辑器div之外的某个位置。这是我当前的实现：

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');
    }
})

稍微复杂一点，并且使用类来表示状态。我还添加了下一个复杂性，即当编辑器失去焦点时进行异步调用。这是我当前工作的基础。