当没有更改时，选择焦点离开事件未触发

Question

当输入框受到焦点时，我想用下拉列表替换输入框。如果未更改任何内容，则恢复以前的值。

一切都按预期工作，但当我只是聚焦在输入框上，然后单击其他地方时，离开焦点事件不会被触发。

这是设计问题还是我的问题？

HTML：

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

并且脚本：

$(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();
    });
}    ​

请参见此jsfiddle： http://jsfiddle.net/mandropil/f9jN3/

- Bartosch Slomak

Answer 1

你可以在替换文本输入后手动聚焦选择元素来轻松解决此问题。

所以，在editfocus()函数中的editOut()之前，只需添加：

$('select').focus();

- SlashmanX