simpleeditable.js

$(document).on("click", ".edit_trigger", function () {
		var $trigger = $(this);

		// Find linked editable
		var editableID = $trigger.data("editable");
		var $editable = $("#" + editableID);

		// Replace editable with input.
		var $input = $("<input>").val($editable.html().trim());
		$editable
			.after($input)
			.hide();

		// Replace button with save & cancel buttons.
		var btnClasses = "btn h28 floatright";

		var $save = $("<a>Save</a>")
			.addClass(btnClasses)
			.click(function () {
				var val = $input.val();
				$editable.trigger("editable:save", val);
				finishEditing(val);
			});

		var $cancel = $("<a>Cancel</a>")
			.addClass(btnClasses)
			.click(function () {finishEditing()});

		$trigger
			.after($save, $cancel)
			.hide();

		// Closure to put original element back
		var finishEditing = function (newVal) {
			if (newVal) $editable.html(newVal);
			$editable.show();
			$trigger.show();
			$input.remove();
			$save.remove();
			$cancel.remove();
		};

	});