foo.html

<div field='field_name'>
  <span class='editable' data-field='field_name'>bar</span>
</div>

quickie.js

$(document).on('click', 'span.editable', function () {
	var data = $(this).html()
	var field = $(this).data('field')

	$('div[field="'+field+'"]').html("<input class='form-control quickie' type='text' data-field='"+field+"' value='" + data + "'>")
})

$(document).on('focusout', 'input.quickie', function (event) {
	var data = $(event.target).val();
	var field = $(event.target).data('field')

	$('div[field="'+field+'"]').html("<span class='editable' data-field='"+field+"'>"+data+"</span>")
})