jquery 展开内部

Question

我正在尝试为 div 框创建一个简单的内联编辑。当我双击 div 时，我用 textarea 标签包裹Inner。这使得它可以编辑。但是，当我单击文本区域字段之外时，如何解开文本区域标记。以下是我所拥有的不起作用的内容。另外我应该使用 focusout、mouseout、mouseleave 或其中任何一个。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 

<div id="test" style="width:300px; height:200px;">
    testing
</div>

<script type="text/javascript">
$("#test").live({
    dblclick: function() {
        $("#test").wrapInner("<textarea/>")
    },
    mouseleave: function() {
        $("#test > textarea").unwrap()
    } 
});
</script>

Answer 1

$("#test > textarea").unwrap() 正在展开文本区域，因此删除 div #test，而不是删除文本区域。相反，你想要:

$("#test > textarea").contents().unwrap()

正如你可以从这个 demo 看到的， mouseleave 将在 wrapInner 之后的任何鼠标移动时立即触发，因此您可能希望将 mouseleave 绑定(bind)到双击处理程序内的文本区域。