Редактирование текста с помощью jquery

Question

Я создаю простой список продуктов. Я хочу реализовать редактирование продукта. Когда я дважды щелкну по продукту, я смогу его отредактировать. Но я не понимаю, как я могу это сделать. Надеюсь, вы меня понимаете, потому что английский не мой основной язык. Мой код здесь:

<div class="container"> 
    <h1>Product List</h1> 
    <input type="text" name="newProduct" id="newProduct" placeholder="Enter your product here"/> 
    <ul id="productList"></ul> 
    <input type="checkbox" id="selectAll"/><label for="Select all">Select all</label> 
    <button id="deleteDoneProducts">Delete Selected</button> 
</div> 

CSS

* { 
    box-sizing:border-box; 
} 
body { 
    font-family: Tahoma, sans-serif; 
} 
.container { 
    margin:0 auto; 
    width:600px; 
} 
h1, #newProduct { 
    text-align: center; 
    width:598px; 
} 
    #newProduct { 
    border:1px solid #999; 
    padding: 20px; 
    font-size: 28px; 
    box-shadow: 0px 0px 3px #888; 
} 
#productList { 
    list-style: none; 
    padding-left:0; 
    background-color: #F2F2F2; 
} 
.product { 
    padding: 15px 0px 15px 40px; 
    margin: 10px; 
    position: relative; 
    font-size: 24px; 
    box-shadow: 2px 2px 3px #848484; 
    background-color: #fff; 
    cursor: pointer; 
    text-transform: capitalize; 
    color:#000; 
    overflow: hidden; 
} 
.product:hover { 
    background-color: #F2F2F2; 
} 
.doneProduct { 
    margin-right: 40px; 
} 
.remove { 
    background-image: url(ico/delete_ico.png); 
    background-position: 0 0; 
    width:30px; 
    height: 30px; 
    position: absolute; 
    right: 20px; 
    top:13px; 
    display: none; 
} 
.remove:hover { 
    background-position: -34px 0px; 
} 
.product:hover .remove { 
    display: block; 
} 
#deleteDoneProducts { 
    float: right; 
    background-color: #a3d5df; 
    color: #fff; 
    padding: 10px; 
    border: none; 
    text-transform: uppercase; 
    font-weight: 900; 
} 
#deleteDoneProducts:hover { 
    background-color: #5fb5c7; 
    cursor: pointer; 
} 

JQuery

function addNewProduct(e) { 
    if(e.keyCode == 13) { 
     var toAdd = $('input[name=newProduct]').val(); 
      $('#productList').append('<li class="product"> <input  type="checkbox" class="doneProduct"/>'+toAdd+'<div class="remove"></div><li/>'); 
      $('#newProduct').val(''); 
      e.preventDefault(); 
    } 
}; 

function deleteProduct() { 
    $(this).parent().remove(); 
}; 


function productDone() { 
    if (!$(this).is(":checked")){ 
     $(this).parent().css({'textDecoration': 'none', 'color': '#000'}) 
    } else { 
     $(this).parent().css({'textDecoration': 'line-through', 'color':  '#999'}); 
    }; 
}; 

function deleteAllSelected() { 
    $(".doneProduct:checked").parent().remove(); 
    $('input[type="checkbox"]').removeAttr("checked"); 
}; 

function selectAllProducts() {  
    if (!$(".doneProduct").is(":checked")) { 
     $(".doneProduct").prop('checked', this.checked); 
     $(".doneProduct").parent().css({'textDecoration': 'line-through',  'color': '#999'}); 

    } else { 
     $(".doneProduct").parent().css({'textDecoration': 'none', 'color': '#000'}); 
     $(".doneProduct").prop('checked', this.checked); 
    } 

};     

$(function() { 
    $("#newProduct").on('keypress', addNewProduct); 
    $(document).on('click', ".remove", deleteProduct); 
    $(document).on('change', ".doneProduct", productDone); 
    $("#deleteDoneProducts").on('click', deleteAllSelected); 
    $("#selectAll").on('click', selectAllProducts); 
    $(".product").on('dbclick', editProductName); 

}) 

https://jsfiddle.net/qp3nnfc5/5/ - это скрипка)

Answer 1

fiddle Попробуйте это:

Измените функцию addnewPRoduct на:

function addNewProduct(e) { 
    if(e.keyCode == 13) { 
      var toAdd = $('input[name=newProduct]').val(); 
      $('#productList').append('<li class="product"> <input type="checkbox" class="doneProduct"/><span>'+toAdd+'</span><div class="remove"></div><li/>'); 
      $('#newProduct').val(''); 
      e.preventDefault(); 
     }; 
}; 

и добавить это к вашим JS:

$("#productList").on("dblclick","li",function(){ 
$(this).find('span').attr("contentEditable",true) 
}) 

Update :

Обновлено fiddle

Добавить это JS

$("#productList").on("keypress","li",function(e){ 
    if(e.which == 13){ 
     e.preventDefault() 
     $(this).find('span').attr("contenteditable",false) 
     return; 
    } 
})