Select focusout not fired when not changed

Question

I' trying to replace an input box with an select list when the input box gets focus. And revert to the old value if nothing is changed.

It all works like expected but when I just focus the input box and then click somewhere outside the focusout event is not being fired.

Is this by design or am I doing something wrong ?

The HTML:

<div id=test>
     <input type=text class=edit value=3 >
     <input type=hidden class=temps>
</div>​

And the Script:

$(function (){
    editfocus();     
    editout();            
});

function editfocus(){    
    $('.edit').unbind('focusin');
    $('.edit').bind('focusin', function() {
    console.log(this);
    var previous = this.value;
    $(this).siblings('.temps').val(previous);
    parentid=$(this).parent()[0].id;
    $('#'+parentid).children('.edit').replaceWith('<select class="edit listme" ><option value=1 >one</option><option value=2 >two</option></select>');
        editout();
    });
}
function editout(){
    $('.edit').unbind('focusout');
    $('.edit').bind('focusout', function() {
        parentid=$(this).parent()[0].id;
        oldval=$(this).siblings('.temps').val();
        $('#'+parentid).children('.edit').replaceWith('<input type=text class=edit   value="'+oldval+'" />');
        editfocus();
    });
}    ​

Please also see this jsfiddle: http://jsfiddle.net/mandropil/f9jN3/

Answer 1

This can easily be fixed by manually focussing the select element after you've replaced the text input.

So before editOut() in the editfocus() function, simply place:

$('select').focus();