По порядку.. click событие срабатывает по нажатию на ЛЮБОЙ абзац в div блоке counts
После клика берется значение из абзаца <p> и создается INPUT где value - это значение из абзаца заносится
Вот тут и трабл!)) У меня в абзаце при наведении появляется span блок с кнопкой удалить... и соответственно этот блок тоже попадает в value ! в INPUT
$('#counts').on('click','p', function(e){
if(i<1){
//ловим элемент, по которому кликнули
var t = e.target || e.srcElement;
//получаем название тега
var elm_name = t.tagName.toLowerCase();
//если это инпут или редактируемая строка - ничего не делаем
if(elm_name == 'p' && $(t).find('input').length != 0 ) {return false;}
if(elm_name == 'input' ){return false;}
if(elm_name == 'span' ){$(this).remove();return false;}
//получаем значение из блока
var val=$(this).html();
//формируем код INPUT
flag=false;
var code = '<input type="text" id="edit" value="'+val+'" /><button id="save">Сохранить</button>';
$(this).empty().append(code);
//устанавливаем фокус на поле
$('#edit').focus();
i++;
$('#edit').keydown(function(event){
if(event.keyCode==13){
$('#save').trigger('click');
}
});
$('#save').click(function() { //обработчик клика по кнопке Сохранить
var val = $('#edit').val(); //получаем то, что в поле находится
//находим строку, опустошаем, вставляем значение из поля
$('#edit').parent().empty().html(val);
i--;
var summa =0;
$('#counts p').each(function(){
summa +=parseInt($(this).text());
$('#itog').text(summa);
});
});
}
});
$('#counts').on('mouseenter','p', function(e){
var t = e.target || e.srcElement;
//получаем название тега
var elm_name = t.tagName.toLowerCase();
//если это инпут или редактируемая строка - ничего не делаем
if(elm_name == 'p' && $(t).find('input').length != 0 ) {return false;}
if(elm_name == 'button' ){return false;}
if(elm_name == 'input' ){return false;}
$(this).addClass('blue');
var code = '<span id="delete">Удалить</span>';
$(this).append(code);
});