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()

从这个demo可以看出，鼠标移动会在wrapInner之后的任何鼠标移动时立即触发，因此您可能希望将鼠标距离绑定到双击处理程序内的textarea。

Answer 2

你应该采取不同的措施。

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

将dblclick直接绑定到#test
在dblclick处理程序.find()新textarea和.focus()上
在.delegate()上放置#test处理程序，而不是使用.live()
使用blur代替mouseleave
在blur处理程序中，将.text()的{{1}}设置为#test的{{1}}。（这对于获取所做的编辑很重要。）

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

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

这是一个允许在textarea中输入HTML的示例。

value

Answer 3

据我所知，Unwrap不存在。获得$('#test > textarea')后，将其内容分配给其父级。

如果您开始使用<span>内的“测试”文本，然后将span的内容复制到textarea，然后再将其复制回来，那么错误就会少得多。

jquery unwrap Inner

3 个答案: