Turn text element into input field type text when clicked and change back to text when clicked away
First of all, you shouldn't need to use onclick in the html itself.
And here's another approach you might take:
/**
We're defining the event on the `body` element,
because we know the `body` is not going away.
Second argument makes sure the callback only fires when
the `click` event happens only on elements marked as `data-editable`
*/
$('body').on('click', '[data-editable]', function(){
var $el = $(this);
var $input = $('<input/>').val( $el.text() );
$el.replaceWith( $input );
var save = function(){
var $p = $('<p data-editable />').text( $input.val() );
$input.replaceWith( $p );
};
/**
We're defining the callback with `one`, because we know that
the element will be gone just after that, and we don't want
any callbacks leftovers take memory.
Next time `p` turns into `input` this single callback
will be applied again.
*/
$input.one('blur', save).focus();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-editable>First Element</p>
<p data-editable>Second Element</p>
<p>Not editable</p>Fiddle: https://jsfiddle.net/7jz510hg/1/
The issue was by not defining the inputIdWithHash and elementValue variables with var they became global variables.
var inputIdWithHash
var elementValue
Then since they had global scope the old values of them were available to the document click handler. You want them locally scoped within that turnTextIntoInputField function.
And an update maintaining values: https://jsfiddle.net/7jz510hg/2/
Side note, you are using jQuery 1.6 so I had to use unbind function instead of off.
Updated fiddle: https://jsfiddle.net/7jz510hg/3/
This uses latest jquery, event namespacing so we can attach more than one click event to the document therefore allowing us to click between the fields and not lose anything. The previous fiddle would mess up if you clicked directly on fields instead of click field, click document, click field.