Question

JQuery- need help with the option to Edit the items on To-Do list program...either an option for edit button or double clicking the item will enable user to edit the list  

To-Do List Build An Todo List Build Color Game Build Calculator save ("ul").on("click", "li",function () 5 $(this).toggleclass ("completed"); 6 7 8 /click on X to delete a Todo 10 ("ul").on("click", "span", function (event) 11 12 $(this).parent ( ) . fadeOut (100, function () 13 14 $(this).remove () ; }); event.stopPropagation(); 15 16 17 18 19 20 21 V 22$(".display") . click(function () { $(this).hide().siblings(".edit").show().val($(this).text()).focus (); 23 24 25 26 C"input[type='text']").keypress (function (event) 27 28 if (event.which=== 13) 29 30 $(this).val); var todo Text = 31 $(this).val $ ("ul").append (" "+todoText+" ") 32 33 34 35 36 37

Answer 1

In case of any queries, please revert back

Here is the code for editing on doubleClick. You can easily extend this to edit button as the logic is the same

var editedContent;

$("#display").on('focusout', 'li > input', function () {
var $this = $(this);
$this.parent().text($this.val() || editedContent);
$this.remove();
});

$("#display").on('dblclick', 'li', function () {
editedContent = $(this).text();
$(this).text("");
$("<input type='text'>").appendTo(this).focus();
});