jquery unwrap Inner

Question

divボックス用の簡単なインライン編集を作成しようとしています。私がdivにdblclick、私はtextareaタグでwrapInner。それはそれを編集可能にする。しかし、テキストエリアフィールドを外にクリックすると、どのようにテキストエリアのタグを展開できますか？以下は私が働いていないものです。また、私は、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

多分あなたは多分やるべきことがいくつかあります。 dblclickハンドラ.find()新しいtextareaで#test

、および.focus()に直接

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

• バインドdblclick場所
その上 .delegate() #test上ハンドラの代わりに、代わりに .live()
• 使用blurを使用してmouseleave
• blurハンドラでの#testをtextareaのvalueに設定します。 （これが行われた編集を拾うために重要である。）

例：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); 
}); 

Answer 2

私が知る限りアンラップは存在しません。 $('#test > textarea')を取得したら、その内容を親に割り当てます。

<span>などの中のテキスト「テスト」で始まってから、スパンの内容をテキストエリアにコピーしてからもう一度コピーすると、エラーが発生しにくくなります。

Answer 3

$("#test > textarea").unwrap()は、テキストエリアをアンラップしているため、テキストエリアを削除するのではなくdiv #testを削除しています。代わりにあなたがしたい：あなたはこのdemoから見ることができるように

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

を、mouseleaveはwrapInner後に任意のマウスの動きに即座にトリガされますので、あなたはおそらく、ダブルクリックハンドラ内テキストエリアにmouseleaveをバインドしたいです。