task completed

css/style.css

@@ -13,4 +13,12 @@
 
 [editable]:empty:after {
 	content: "Not set";
+}
+
+#change {
+	display: none;
+}
+
+button {
+	margin-left: 10px;
 }

index.html

@@ -15,11 +15,19 @@
 
 		<ul class="list-group">
 			<li class="list-group-item"><strong>Firstname: </strong><span editable="text" onbeforesave="validateText" onaftersave="sendToServer">Tony</span></li>
-			<li class="list-group-item"><strong>Lastname: </strong><span editable="text" onbeforesave="validateText"></span></li>
+			<li class="list-group-item"><strong>Lastname: </strong><span editable="text"></span></li>
 			<li class="list-group-item"><strong>Age: </strong><span editable="number">25</span></li>
 			<li class="list-group-item"><strong>Email: </strong><span editable="email">Stark@gmail.com</span></li>
 			<li class="list-group-item"><strong>Password: </strong><span editable="password">123456789</span></li>
 		</ul>
+
+
+	<div id="change">
+		<button type="button" id="firstButton" class="btn btn-primary  btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
+		<button type="button" id="secondButton" class="btn btn-danger  btn-xs"><span class="glyphicon glyphicon-remove"></span></button>
+	</div>
+
+		
 	</div>
 	<script src="bower_components/jquery/dist/jquery.min.js"></script>
 	<script src="js/script.js"></script>

js/script.js

@@ -10,47 +10,80 @@ function sendToServer(value) {
 	console.log('Send to server', value);
 }
 
-$('[editable]').on('click', function(event){
+$('body').on('click', '[editable]', function(event){
 	event.preventDefault();    // сбросили поведение элементов по молчанию, если была бы ссылка она бы не работала (защита от дурака)
 
 	var $element = $(this);
 	var type = $element.attr('editable');
 
+	var $firstButton = $('#firstButton');
+	var $secondButton = $('#secondButton');
+	
+	$firstButton.show();
+	$secondButton.show();
+
+	function hideButton(){
+		$firstButton.hide();
+		$secondButton.hide();
+	}
+
 	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);
+		$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) {
+ var $inp = $('<input>')
+		.attr('type', type)
+		.val( $element.text() )
+		.insertAfter($element)
+		.focus()
+		.select()
+		.after( $secondButton ) 
+		.after( $firstButton );
+
+	$inp
+		.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);
+						hideButton();
+					}
+				}  else {
 					onEdit.call(this);
+					hideButton();
 				}
-			}  else {
-				onEdit.call(this);
-			}
 			
-		} else if (event.which === 27) {   //27 код  клавиши esc 
-			$(this).trigger('blur');        // вызов обработчика событий путем тригера
-		}
+			} else if (event.which === 27) {   //27 код  клавиши esc 
+				$element.insertAfter(this);
+				$(this).remove();  // ремув удаляет обработчик событий вместе с элементом
+				hideButton();
+			}
+		})
+
+	$element.remove();
+
+	$firstButton.one('click', function() {
+		onEdit.call($inp);
+		hideButton();
+		event.stopPropagation();
 	})
-	.on('blur', function(event) {         // блюр обработчик событий которй срабатывает при потере фокуса 
-		$element.insertAfter(this);
-		$(this).remove();  // ремув удаляет обработчик событий вместе с элементом
+
+	$secondButton.one('click', function() {
+		$element.clone().insertAfter($inp.val( $element.text() ) );
+		$inp.remove();  // ремув удаляет обработчик событий вместе с элементом
+		event.stopPropagation();
+		hideButton();
 	})
 
-	$element.detach();   //детач удаляет элемент но не удаляет обработчик событий на элементе
-});
+})