Making this JavaScript function simpler with jQuery?

Question

I have this, text, that when you click on it, you can edit it and when you click somewhere else it will store it to the database(by sending ajax call), and your edited new text will show.

Here is it: http://jsbin.com/ewihu3

Try clicking at the text, and you will see it become a field and so.

Here's my current code: http://jsbin.com/ewihu3/edit

I know how to make ajax call in jquery, but i dont know how to make a on click function that turns the text to a field with the text and when done it should be text-format again with the new text you just edited it too..

How can i do this?

Answer 1

Yes, this can be done easier with jQuery.

Answer 2

This is simple:

<span>Click to edit me</span>​

$('span').bind('click', function(){
   this.contentEditable = true;
});​

http://www.jsfiddle.net/7A6MQ/2/

Answer 3

I would not use contentEditable as it is not supported by older IE versions.