jQuery focus() and focusout() conflict in IE

Question

Not sure how to solve this.

I'm using jQuery.focus() and jQuery.focusout() to trigger an Ajax request and rename a post in WordPress. This code works ok in Chrome and Firefox but i can't get it to work on IE.

snippet:

$('.editname').on('click', function() {

    var input = $('<input id="editcat" type="text" name="editcat" value="' + name + '" />');
    input.appendTo($(this));
    $("#editcat").focus();
});

$(".editname").focusout(function() {

    $(this).children('input').detach();
    $(this).children('span').show();


});

working example: http://jsfiddle.net/moraleida/fE5Tq/3/

Seems that focusout() event is called right after the appendTo in IE, before the browser has time to focus() on the appended input.

Is there a known workaround for this?

EDIT

Changing focusout to blur doesn't work. Apparently, the problem is that calling $("#editcat").focus(); makes .editname loose focus/blur. If I comment that line, the input appears ok, but when I click to focus on it, it gets detached.

Answer 1

Try the blur event instead

$(".editname").on('blur', function() {

    $(this).children('input').detach();
    $(this).children('span').show();


});

Answer 2

Try to use blur event instead of focusout.

Answer 3

As it turns out, the problem was on attaching focusout to the parent element, instead of the input element. This solved it:

$(".editname").on('focusout', 'input', function() {

    // $(this) now refers to the input element, not .editname
    $(this).siblings('span').show();
    $(this).detach();


    });
});​

Final working fiddle for reference: http://jsfiddle.net/moraleida/fE5Tq/8/