jquery展开内部

我正在尝试为div框创建一个简单的内联编辑。当我在div上dblclick时，我会用textarea标签包装这个文件。这使得它可以编辑。但是，当我在textarea字段外单击时，如何打开textarea标记呢。下面是我所拥有的不起作用的东西。我也应该使用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>

测试
$（“#测试”）.live({
dblclick:function（）{
$（“#测试”）.wrapInner（“”）
},
mouseleave:function（）{
$（“#测试>文本区域”）.unwrap（）
} 
});
据我所知，“展开”并不存在。一旦有了
$（“#测试>文本区域”）
，就将其内容分配给其父项

如果您从
或其他内容中的文本“testing”开始，然后将span的内容复制到一个textarea，然后再复制回来，那么就不那么容易出错。
$（“#test>textarea”）。unwrap（）
是展开textarea，因此删除div#test，而不是删除textarea。相反，您希望：

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

从中可以看出，鼠标移动后，鼠标移动会立即触发鼠标移动，因此您可能希望将鼠标移动绑定到双击处理程序中的文本区域。
您可能需要做一些不同的事情

$("#test").dblclick( function() {
    $(this).wrapInner("<textarea/>").find('textarea').focus();
}).delegate('textarea','blur',function() {
    $(this).parent().text( this.value );
});

这是可行的，但是当您已经在文本区域内并且再次dblclick时，文本将消失。每次dblclick都会在textarea上创建另一个实例。测试完成后，它不会进行“展开”工作。它实际上删除了里面的每个子标签，而不仅仅是文本区域。如果单词周围有一个span标记，则span标记将被删除。@alex:你是说在文本区域中键入的标记吗？它允许HTML，并且不使用任何
wrap
类型的方法。我的意思是如果div容器已经包含span标记或其他html。在您的情况下，用户将在编辑时看到html代码。我不想显示html源代码。我想像第一个例子一样编辑文本，但保留它已经存在的html属性。更像是编辑器预览模式，而不是源模式。选中@alex:那么，您希望新的textarea只包含没有任何HTML标记的文本，但是您希望在编辑完成时保留这些标记。不幸的是，这将极难实现。删除标记后，您需要记住带有标记的旧内容，分析现在已编辑的新文本，然后将标记放回适当的位置，这可能无法确定。也许你正在寻找一个基于javascript的文本编辑器？@alex Oops！但是，它适用于DOM元素，而不是它们的值内容。
$("#test").dblclick(function() {
    $(this).html($("<textarea/>",{html:this.innerHTML})).find('textarea').focus();
}).delegate('textarea', 'blur', function() {
    $(this).parent().html(this.value);
});