jquery unwrap Inner

Question

我正在尝试为div框创建一个简单的内联编辑.当我在db上点击div时,我用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>

Answer 1

$("#test > textarea").unwrap()是解开textarea,因此删除div #test,而不是删除textarea.相反,你想要:

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

正如你可以看到这个演示中,鼠标离开会立即触发后的任何鼠标移动wrapInner,所以你可能希望将鼠标离开绑定到双击处理程序中的文本区域.

Answer 2

有些事情你可能应该采取不同的做法。

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

• dblclick直接绑定到#test
• 在dblclick处理程序中.find()new textarea，然后.focus()就可以了
• 放置一个.delegate()处理程序#test而不是使用.live()
• 使用blur而不是mouseleave
• 在blur处理程序中，将.text()of设置#test为value的textarea。（这对于获取所做的编辑非常重要。）

示例： http: //jsfiddle.net/drQkp/1/

示例： http: //jsfiddle.net/drQkp/2/

下面是一个允许在文本区域中输入 HTML 的示例。

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