jquery unwrap Interno

Question

Sto provando a creare una semplice modifica in linea per una casella di divisione. Quando faccio il doppio clic sul div, ho wrapInner con il tag textarea. Questo lo rende modificabile. Ma come posso scartare il tag textarea quando clicco sul campo textarea. Di seguito è quello che ho che non funziona. Inoltre dovrei usare focusout, mouseout, mouseleave o qualcuno di questi.

<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

Alcune cose che probabilmente dovresti fare diversamente.

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

• Bind il dblclick direttamente al #test
• Nel dblclick gestore .find() il nuovo textarea, e .focus() su di esso
• Posizionare un gestore .delegate() su #test invece di usare .live()
• Usa blur invece di mouseleave
• Nel gestore blur, impostare .text() su #test su value su textarea. (Questo è importante al fine di raccogliere le modifiche che sono state fatte.)

Esempio:http://jsfiddle.net/drQkp/1/

---

Esempio:http://jsfiddle.net/drQkp/2/

Ecco un esempio che permette HTML essere digitato nella textarea.

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

Answer 2

Unwrap non esiste per quanto ne so. Una volta che hai $('#test > textarea'), assegna il suo contenuto al suo genitore.

Sarebbe molto meno soggetto a errori se si iniziava con il testo "test" all'interno di uno <span> o qualcosa del genere, quindi copiare il contenuto dello span in un'area di testo, quindi di nuovo indietro.

Answer 3

$("#test > textarea").unwrap() sta scartando la textarea, quindi rimuovendo il div #test, invece di rimuovere la textarea. Invece si vuole:

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

Come si può vedere da questo demo, il mouseLeave attiveranno immediatamente qualsiasi movimento del mouse dopo il wrapInner, quindi probabilmente si desidera associare il mouseLeave alla textarea all'interno del gestore di DoubleClick.