x-editable/js/script.js

console.clear();

'use strict';

function validateText(value) {
	return value !== '' ? true : false;
}

function sendToServer(value) {
	console.log('Send to server', value);
}

$('[editable]').on('click', function(event){
	event.preventDefault();    // сбросили поведение элементов по молчанию, если была бы ссылка она бы не работала (защита от дурака)

	var $element = $(this);
	var type = $element.attr('editable');

	var events = {
		before: $element.attr('onbeforesave') ? $element.attr('onbeforesave') : null,
		after: $element.attr('onaftersave') ? $element.attr('onaftersave') : null
	};
	function onEdit() {
		$element.text( $(this).val() )
		.insertAfter(this);
		
		events.after && window[events.after]( $(this).val() );
		$(this).remove();
	}

	$('<input>').attr('type', type).val( $element.text() )
	.insertAfter($element)
	.focus()         // при клике фокус на элементе
	.select()           //при клике фокус на элементе и текст выделен
	.on('keyup', function(event) {  // обработчик событий на элементе и проверяем клавиши 13 -энтер, 27 -эск
		if (event.which === 13) {   
			if (events.before) {
				var valid = window[events.before]( $(this).val() );
				if (valid) {
					onEdit.call(this);
				}
			}  else {
				onEdit.call(this);
			}
			
		} else if (event.which === 27) {   //27 код  клавиши esc 
			$(this).trigger('blur');        // вызов обработчика событий путем тригера
		}
	})
	.on('blur', function(event) {         // блюр обработчик событий которй срабатывает при потере фокуса 
		$element.insertAfter(this);
		$(this).remove();  // ремув удаляет обработчик событий вместе с элементом
	})

	$element.detach();   //детач удаляет элемент но не удаляет обработчик событий на элементе
});