Edit text inline with jquery

Demo is available here.

How it works:

• Wrap the editable content within a span and assign it a class
• Assign a click event handler to the class
• Click event handler returns immediately if it is already in editing mode
• Create a text input element and set its value to be the existing html of the editable element
• Replace DOM of the editable element with text input
• Assign the text input a blur event handler
• Blur event handler will get the value of the text element and replace DOM of the editable element with it.

Assigning the editable element a class is not done for styling it but rather to select it.
We could have assigned it an id and written an event handler for the id. The disadvantage with this approach is that we have to duplicate the code if we want multiple elements to be editable. Assigning it a class achieves this.